【案例引入】
有个病人在寒冷的十一月患上了严重的肺炎，并且其病情越来越重。她将生命的希望寄托在窗外最后一片藤叶上，以为藤叶落下之时，就是她生命结束之时。她失去了活下去的勇气和信念。她的朋友很伤心，便将病人的想法告诉了一个老画家，这个老画家画了近四十年的画，一事无成，每天都说要创作出一篇惊世之作，却始终只是空谈。然而令人惊奇的事发生了，尽管屋外的风刮得那样厉害，而锯齿形的叶子边缘已经枯萎发黄，但它仍然长在高高的藤枝上。病人看到最后一片叶子仍然挂在树上，叶子经受凛冽的寒风依然可以存留下来，自己为什么不能？于是又重拾生的信念，顽强地活了下来。原来是年过六旬的老画家，在一个风雨交加的夜晚，为了画上最后一片藤叶，因着凉，染上了肺炎。在他生命的最后时刻，他终于完成了令人震撼的杰作。
【案例分析】
色彩在网页中应用广泛，尤其在网页的高级美化中，我们要了解色彩的特性，让它在网页设计中达到最好效果。我们要利用色彩的不同表现含义，来体现网页作品的真善美，来挖掘人类情绪与色彩的关联性。案例中的病人已处于生命垂危之际，在绝望之余，她将生命寄托在最后一片即将掉落的枯萎发黄的藤叶上面，她认为藤叶落下之时，就是她生命结束之时。一个老画家为了挽救她的生命，深夜冒雨画上最后一片藤叶，挽救了她的生命，自己却染上肺炎去世了。从这片枯黄色的藤叶上，我们发现了人类的真善美，我们为老画家生命的付出而感动。那么在我们制作网页应用色彩时，也要与人为善，用最好的色彩去启发、引导、帮助那些需要的人，达到释放真善美的最好效果。
【主要知识点】
9.1.1 颜色属性
CSS的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或者背景图像的属性。
语法：
color:color-value
HTML语言使用十六进制的RGB颜色值对颜色进行控制，即颜色可以通过英文名称或者十六进制来表现。如标准的红色，可以用RED作为名称来表现，也可以用#FF0000作为十六进制来表现。
能够使用的预设颜色命名总共有140种，常用的有16种：Black，Olive，Teal，Red，Blue，Maroon，Navy，Gray，Lime，Fuchsia，White，Green，Purple，Silver，Yellow和Aqua（黑、橄榄色、蓝绿色、红色、蓝色、褐色、海军蓝、灰色、橙色、紫红色、白色、绿色、紫色、银色、黄色、水绿色）。
9.1.2 背景属性
background简写属性在一个声明中设置所有的背景属性，主要属性如下：
1）background-color设定背景颜色
在CSS里，backgroud-color属性表示背景颜色的设置。
语法：
微课9.1 CSS3背景属性
说明：初始值为transparent（透明）。
案例【9.1.1】backgroud-color应用
效果如图9.1.1所示。
图9.1.1 背景属性
2）background-image设定背景图像
在CSS里，可用background-image属性来设置网页背景以图片方式显示。
语法：
none：无背景图。
（1）url（url）属性
该属性使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置的图像名称。
注意：页面中可以用JPG或者GIF图片作为背景图，背景图像放在网页的最底层，文字和图片等都位于其上，与在网页中插入图片的效果是不同的。
案例【9.1.2】background-image的应用
图9.1.2 背景图片的应用
效果如图9.1.2所示。
（2）Gradient属性
原来的CSS版本，要实现背景图像渐变，需用Photoshop等图像编辑软件创建一个渐变图形，然后使用background-image属性把渐变图形放在元素的背景中。DreamWeaver CC中，CSS支持渐变背景，渐变也使用常规的background-image属性创建。
（3）linear-gradient线性渐变
background-image：linear-gradient（角度，颜色）；
线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。这条直线的方向由角度指定，或者在关键字to后面加上top、bottom、right、left中的某一个关键字或多个关键字。
案例【9.1.3】背景图像线性渐变应用
效果如图9.1.3所示。
图9.1.3 背景图像线性渐变应用
3）背景图片的位置属性
通过背景图片的位置属性background-position可以改变背景图片的最初位置。
语法：
说明：
①以百分比方法设置background-position属性的语法如下：
background-position:x% y%
其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0% 0%。
案例【9.1.4】背景图片的位置属性
此段代码表示背景图片的水平位置为80%，垂直位置为70%。效果如图9.1.4所示。
图9.1.4 背景图片的位置属性
②以长度单位设置background-position属性的语法如下：
background-position:x y
使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。如：
表示从左起30 px、垂直50 px的位置开始显示图像。
③以关键字设置background-position属性的语法如下：
（注：
表示或的意思，
表示二者同时使用，[]表示可搭配使用）
表9.1.1 background-position属性关键字方法的参数值(www.daowen.com)
案例【9.1.5】背景图片的位置属性关键字应用
此案例代码表示背景图片的水平位置为100%，垂直位置为100%。位置开始显示图像。效果如图9.1.5所示。
4）background-size属性
background-size属性规定背景图像的尺寸。
语法：
图9.1.5 背景图片的位置属性关键字应用
表9.1.2 background-size属性
案例【9.1.6】背景图片的background-size属性应用
图9.1.6 background-size属性应用
此案例代码表示背景图片的宽度为150 px，高度为200 px。效果如图9.1.6所示。
5）background-clip属性
background-clip属性指定确定背景的裁剪区域，即控制元素背景显示区域。
语法：
①border-box：此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉。
②padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉。
③context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉。
案例【9.1.7】背景图片的background-clip属性应用
效果如图9.1.7所示。
6）background-repeat背景图片重复属性
background-repeat用来设定背景图像平铺。它决定一个指定的背景图片如何被重复。
语法：
图9.1.7 裁剪区域属性应用
表9.1.3 background-repeat背景图片重复属性
7）background-origin背景图片起点
background-origin属性规定background-position属性相对于什么位置来定位。
注释：如果背景图像的background-attachment属性为fixed，则该属性没有效果。
属性值：
①border-box是把背景图片的坐标原点设置在盒模型border-box区域的左上角。
②padding-box是把背景图片的坐标原点设置在盒模型padding-box区域的左上角。
③content-box是把背景图片的坐标原点设置在盒模型content-box区域的左上角。
8）background-attachment固定背景图片
该属性用来设定背景图像是否跟随页面内容滚动。
语法：
scroll：背景图像跟随页面内容滚动。
fixed：背景图像固定。
案例【9.1.8】background-attachment属性的应用
效果如图9.1.8所示。
图9.1.8 background-attachment属性应用
【课程育人】
通过案例引入与网页对象的背景样式设置的融合学习，我们应该掌握：
1.通过对背景颜色、图片、位置（水平纵向）等的设置，学会利用作品体现人间的真善美，善于发现学习中的美，发现作品中的美，给予作品用户热爱生命、热爱生活的高尚情操。
2.在制作网页应用色彩时，要与人为善，用最好的色彩去启发、引导、帮助那些需要的人，达到释放真善美、乐于助人的最好效果。
【课堂互动】
1.HTML语言使用（ ）进制的RGB颜色值对颜色进行控制。
2.下列属于背景属性的元素是（ ）。（多选题）
A.background-color B.background-image
C.background-position D.background-size
3.下列属于background-repeat背景图片重复属性的有（ ）。（多选题）
A.Repeat B.repeat-x C.repeat-y D.no-repeat
4.下列不属于background-origin背景图片起点属性的是（ ）。
A.content-box B.right-box C.padding-box D.border-box
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
