农产品网页设计与制作 盒子背景 任务四 背景属性.pptxVIP

信息工程系教师：宇虹儒 任务四 背景属性 项目五 DIV+CSS创建网页 相关知识 背景属性 1 背景属性 网页能通过背景图像给读者留下更深刻的印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，合理控制背景颜色和背景图像至关重要。 设置背景颜色 1 在CSS中，网页元素的背景颜色使用background-color属性来设置 background-color:背景颜色属性 实际工作中最常用 #十六进制色值，例：#ccc 背景属性 设置背景图像 2 在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。 background-image :背景颜色属性 背景属性 背景与图片不透明度的设置 3 通过引入RGBA模式和opacity属性，可以设置图片的不透明度。 背景属性 背景与图片不透明度的设置 3 通过引入RGBA模式和opacity属性，可以设置图片的不透明度。 背景属性 设置背景图像平铺 4 默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。 background-repeat图像平铺属性 平铺属性值 含义 repeat 沿水平和竖直两个方向平铺（默认值） no-repeat 不平铺（图像位于元素的左上角，只显示一次） repeat-x 只沿水平方向平铺 repeat-y 只沿竖直方向平铺 背景属性 设置背景图像位置 5 background-position图像位置属性 位置属性取值 含义 单位数值 设置图像左上角在元素中的坐标，例如background-position:20px 20px; 预定义的关键字 水平方向值：left、center、right。 垂直方向值：top、center、bottom。 百分比 0% 0% ：图像左上角与元素的左上角对齐。 50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。 20% 30%：图像20% 30%的点与元素20% 30%的点对齐。 100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。 背景属性 设置背景图像固定 6 background-attachment图像固定属性 固定属性取值 含义 scroll 图像随页面元素一起滚动（默认值）。 fixed 图像固定在屏幕上，不随页面元素滚动。 背景属性 设置背景图像大小 7 background-size:属性值1 属性值2; 运用CSS3中的background-size属性可以轻松控制背景图像的大小。 属性值 说 明 像素值 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； 百分比 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； cover 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； 背景属性 设置背景的显示区域 8 background-origin:属性值; 运用CSS3中的background-origin属性可以自行定义背景图像的相对位置。 背景属性 设置背景图像的裁剪区域 9 background-clip:属性值; 在CSS样式中，background-clip属性用于定义背景图像的裁剪区域 背景属性 设置多重背景图像 10 在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。 例如： background-image: url(images/caodi.png), url(images/taiyang.png), url(images/tiankong.png); 背景属性 背景复合属性 11 CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin]; 背景属性 背景