1、实例版,第14章 颜色和背景,14.1 设置颜色color 14.2 设置背景颜色background-color 14.3 插入背景图片background-image 14.4 插入背景附件background-attachment 14.5 设置重复背景图片background-repeat 14.6 设置背景图片位置background-position 14.7 小实例综合设置颜色和背景 14.8 习题,14.1 设置颜色color,语法说明, 关键字：颜色关键字就是用颜色的英文名称来设置颜色。例如：“red”代表红色，“black”代表黑色等。 RGB值：在CSS中，RGB值有多种
2、表示方式，如十六进制的RGB值和RGB函数值都行。,14.1 设置颜色color,实例代码,14.1 设置颜色color,接上页,14.1 设置颜色color,网页效果,14.1 设置颜色color,网页效果,14.2 设置背景颜色background-color,基本语法,background-color: 关键字|RGB值|transparent,14.2 设置背景颜色background-color,语法说明, 关键字和RGB值可参照上一节“14.1设置颜色color”中的语法说明。 transparent表示透明值，是背景颜色background-color属性的初始值。,14.2 设
3、置背景颜色background-color,实例代码,14.2 设置背景颜色background-color,接上页,14.2 设置背景颜色background-color,网页效果,14.3 插入背景图片background-image,基本语法,background-image:url|none,14.3 插入背景图片background-image,语法说明, URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。 none是一个默认值，表示没有背景图片。,14.3 插入背景图片
4、background-image,实例代码,14.3 插入背景图片background-image,接上页,14.3 插入背景图片background-image,网页效果,14.4 插入背景附件background-attachment,基本语法,background-attachment:scroll|fixed,14.4 插入背景附件background-attachment,语法说明, scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。 fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。,14.4 插入背景附件background-attachment
5、,实例代码,14.4 插入背景附件background-attachment,接上页,14.4 插入背景附件background-attachment,网页效果,14.5 设置重复背景图片background-repeat,基本语法,background-repeat:repeat|repeat-x|repeat-y|no-repeat,14.5 设置重复背景图片background-repeat,语法说明,14.5 设置重复背景图片background-repeat,实例代码,14.5 设置重复背景图片background-repeat,接上页,14.5 设置重复背景图片background
6、-repeat,网页效果,14.6 设置背景图片位置background-position,基本语法,background-position：百分比|长度|关键字,14.6 设置背景图片位置background-position,语法说明, 利用百分比和长度设置图片位置时，都要指定两个值，并且这两个值要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。 关键字在水平方向的主要有left、center、right，表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直
7、方向的关键字可相互搭配使用。 使用百分比和关键字对比说明background-position属性的属性值。,附表14-2,14.6 设置背景图片位置background-position,表14-2 backgorund-position属性取值说明,返回,14.6 设置背景图片位置background-position,实例代码,14.6 设置背景图片位置background-position,接上页,14.6 设置背景图片位置background-position,网页效果,14.7 小实例综合设置颜色和背景,实例代码,14.7 小实例综合设置颜色和背景,接上页,14.7 小实例综合设置颜色和背景,接上页,14.7 小实例综合设置颜色和背景,网页效果,
