第五章盒子模型PPT课件

1、第五章 盒子模型 HTML5盒子模型的相关属性渐变属性盒子模型概述 背景属性 HTML5 5 5.4 .4CSS3渐变属性5 5.1 .1盒子模型概述5 5.3 .3背景属性目录5 5.2 .2盒子模型相关属性5 5.5 .5制作音乐排行榜 5.3 背景属性1 12 2设置背景图像设置背景图像知识引入背景与图片不透明度的设置背景与图片不透明度的设置4 45 53 36 67 78 8设置背景颜色设置背景颜色设置背景图像平铺设置背景图像平铺设置背景图像的位置设置背景图像的位置设置背景图像固定设置背景图像固定设置背景图像的大小设置背景图像的大小设置背景的显示区域设置背景的显示区域9 9101011

2、11设置背景设置背景图像图像的剪裁区域的剪裁区域设置多重背景图像设置多重背景图像背景复合属性背景复合属性 5.3 知识点讲解在CSS中，使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。1、 设置背景颜色设置背景颜色 背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。2、 设置背景图像设置背景图

3、像5.3 知识点讲解 （1）RGBA模式模式RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。其语法格式如下：3、 背景与图片不透明度的设置背景与图片不透明度的设置rgba(r,g,b,alpha);5.3 知识点讲解 （2）opacity属性属性在CSS3中，使用opacity属性能够使任何元素呈现出透明效果。其语法格式如下：3、 背景与图片不透明度的设置背景与图片不透明度的设置opacity：opacityValue;5.3 知识点讲解 默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方

4、向平铺，可以通过background-repeat属性来控制，该属性的取值如下：repeat：沿水平和竖直两个方向平铺（默认值）no-repeat：不平铺（图像位于元素的左上角，只显示一个）repeat-x：只沿水平方向平铺repeat-y：只沿竖直方向平铺4、 设置背景图像平铺设置背景图像平铺5.3 知识点讲解 如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。5、 设置背景图像的位置设置背景图像的位置5.3 知识点讲解 如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background-attachm

5、ent属性来设置。background-attachment属性有两个属性值，分别代表不同的含义，具体解释如下：scroll：图像随页面元素一起滚动（默认值）fixed：图像固定在屏幕上，不随页面元素滚动。6、 设置背景图像固定设置背景图像固定5.3 知识点讲解 在CSS3中，background-size属性用于控制背景图像的大小，其基本语法格式如下：具体解释如下表所示。7、 设置背景图像的大小设置背景图像的大小background-size:属性值1 属性值2;属性值说 明像素值设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；百分

6、比以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；5.3 知识点讲解 在默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像，运用CSS3中的background-origin 属性可以改变这种定位方式，自行定义背景图像的相对位置，其基本语法格式如下：在上面的语法格式中，background-orig

7、in 属性有三种取值，分别表示不同的含义，具体解释如下。padding-box：背景图像相对于内边距区域来定位。border-box：背景图像相对于边框来定位。content-box：背景图像相对于内容框来定位。8、 设置背景的显示区域设置背景的显示区域background-origin:属性值;5.3 知识点讲解 在CSS样式中，background-clip属性用于定义背景图像的裁剪区域，其基本语法格式如下：在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。border-box：默认值，从边框区域向外裁剪背景。p

8、adding-box：从内边距区域向外裁剪背景。content-box：从内容区域向外裁剪背景。9、 设置背景图像的剪裁区域设置背景图像的剪裁区域background-clip:属性值;5.3 知识点讲解 CSS3中增强了背景图像的功能，允许一个容器里显示多个背景图像，使背景图像效果更容易控制。但是CSS3中并没有为实现多背景图片提供对应的属性，而是通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开。10、 设置多重背景图像设置多重背景

9、图像5.3 知识点讲解 同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：11、 背景复合属性背景复合属性background:background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin;5.3 知识点讲解 多学多学一招一招：使用背景图像属性定义列表：使用背景图像属性