Web前端开发项目教程 课件 5.2.1背景颜色、背景图像、背景重复、背景位置、背景附着1

Web前端开发项目教程主讲人：卞孝丽1.1课程导论项目5美化传统文化网任务5.1创作画像展及图片边框

任务5.2添加创意渐变色与多重图像背景目录任务5.2添加创意渐变色与多重图像背景【任务效果图】

背景颜色、背景图像、背景重复背景位置、背景附着【任务目标】知识目标掌握背景颜色、背景图像、背景重复、背景位置、背景附着等背景属性的设置方法。能力目标

能够使用单属性及复合属性综合设置元素的背景颜色和图像；能够在网页设计中为元素添加合适的背景效果以确定网站的风格。素质目标

塑造专业自信；提升网页制作中对页面的美感和设计感的把握。【导学知识】一、

背景颜色background-color属性可以指定元素的背景色，颜色取值有多种方式。1.颜色名称

比如蓝色"blue"2.十六进制值

蓝色是"#0000ff"，可简写为"#00f"3.RGB函数

rgb()中蓝色是"0,0,255"...【导学知识】二、

背景图像

1.添加背景图像

背景不仅可以设置为某种颜色，还可以设置为某张图像。在CSS中，通过background-image属性可以实现将图像作为网页元素的背景。默认情况下，图像会重复，以覆盖整个元素。【导学知识】

如果某元素同时具有background-image和background-color属性，那么background-image属性将优先于background-color属性，也就是说背景图片永远覆盖于背景色之上，可以利用虚线边框或是透明背景的图像测试效果。只加背景颜色绿色：

p{width:300px;height:300px;border:20pxdottedred;background-color:green;}【导学知识】同时加背景图片与背景颜色：

p{width:300px;height:300px;background-image:url(touxiang.jpeg);background-size:300px300px;border:20pxdottedred;background-color:green;}只加背景图片：

p{width:300px;height:300px;background-image:url(touxiang.jpeg);background-size:300px300px;border:20pxdottedred;

}效果相同因为颜色被压在下面看不到【导学知识】

选用不影响文字读取的图片做背景或是为文本添加底衬，利于辨识。【导学知识】

不加文字底衬时，颜色深或比较鲜艳的背景图会影响内容的辨识度。【导学知识】二、

背景图像2.控制背景图像

（1）背景重复background-repeat

background-repeat属性用来控制背景图像的平铺方式。默认情况下，一幅背景图像不足以占满整个容器时，会在水平方向和垂直方向重复，以填满整个容器。【导学知识】●repeat：沿水平和垂直两个方向（默认值）；●no-repeat：不平铺，即背景图像只出现一次；●repeat-x：只沿水平方向平铺；●repeat-y：只沿垂直方向平铺；●round:自动缩放直到适应填充满整个容器，如果是比较小的图像在较大的区域中显示，重复n次之后（x/y轴方向）如果剩余空间大于等于imgWidth*50%则重复第n+1次，否则拉伸已经重复的背景图（CSS3新增）；●space:在不缩放的前提下尽可能多的重复图片，不足的空隙均分，以相同的间距平铺，填充满整个容器或某个方向（CSS3新增）。

若希望背景图像只出现一次或只在某个方向上重复，可以取值no-repeat或repeat-x、repeat-y，background-repeat各属性值及含义如下：【导学知识】二、

背景图像2.控制背景图像

（2）背景位置background-position

background-position属性可以控制背景图像的位置，比如让背景图像显示在元素框的右上方可以设置背景位置属性值为右上“background-position:righttop;”。默认值是左上“lefttop”，第一个值是水平位置，第二个值是垂直位置，如果仅规定了一个关键词，那么第二个值将是“center”，默认值：topleft；还可以使用百分比（左上角是“0%0%”）或像素值（左上角是“00”，值为0时可以省略单位），如果仅规定了一个值，另一个值将是50%。【导学知识】二、

背景图像2.控制背景图像

（3）背景附着background-attachment

background-attachment属性指定背景图像是应该附着在元素上随着元素一起滚动（scroll，默认），还是固定（fixed）在某一个位置，不随页面一起滚动，实现控制背景图像固定显示在浏览器视口某个固定位置的效果。【任务小结】

除了背景颜色、背景图像、背景重复、背景位置、背景附着这五个属性之外，要想灵活控制背景所显示的效果，还需要学习背