CSS盒子模型-背景属性.pdfVIP

CSS盒⼦模型-背景属性 1.设置背景颜⾊ 在CSS中，使⽤ background- color属性来设置⽹页元素的背景颤⾊，其属性值与⽂本颜⾊的取值⼀样，可使⽤预定义的颜⾊值、⼗六进制# RRGGBB或RGB代码rgb(r.g.b),background- color的默认值为 transparent,即背景透明，此时⼦元素会显⽰其⽗元素的背景。 下⾯通过⼀个案例来演⽰ background- color属性的⽤法。新建HTML页⾯，在页⾯中添加标题和段落⽂本，然后通过 属性控 制标题标记h2和主体标记body的背景颜⾊。 在上例中，通过 background- color属性分别控制标题和⽹页主体的背景颜⾊。 在图中，标题⽂本的背景颜⾊为黄⾊，段落⽂本显⽰⽗元素body的背景颜⾊。这是由于未对段落标记p设置背景颜⾊时，会默认为透明背景( transparent),所以段落将显⽰其⽗元素的背景颜⾊。 2.设置背景图⽚ 背景不仅可以设置为某种颜⾊，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像， ⽰例代码： 效果： 如果图⽚是⼩尺⼨的话，背景图像会⾃动沿着⽔平和竖直两个⽅向平铺，充满整个页⾯，并覆盖boby的背景颜⾊值。 3.背景与图⽚不透明度设置 3.1 RGBA模式 RGBA是CS3新增的颜⾊模式，它是RGB颜⾊模式的延伸，该模式是在红、绿、蓝三原⾊的基础上添加了不透明度参数。其语法格式为： raba(r,g,b,alpha); 在上⾯的语法格式中，前三个参数与RGB中的参数含义相同， alpha参数是⼀个介于0.0（完全透明）和1.0 （完全不透明）之间的数字。 例如，使⽤RGBA模式为p元素指定透明度为0.5,颜⾊为红⾊的背景，代码如下。 p{background-color:rgba(255,0,0,0.5);} 3.2 opacity属性 在CSS3中，使⽤ opacity属性能够使任何元素呈现出透明效果。其语法格式为 opacity:opacityValue; 在上述语法中， opacity属性⽤于定义元素的不透明度，参数 opacityValue表⽰不透明度的值，它是⼀个介于0~1的浮点数值。其中，0表⽰完 全透明，1表⽰完全不透明，⽽0.5则表⽰半透明。 ⽰例： 4.设置背景平铺 默认情况下，背景图像会⾃动沿着⽔平和竖直两个⽅向平铺，如果不希望图像平铺，或者只沿着⼀个⽅向平铺，可以通过 属性来控制，该属性的取值如下。 repeat:沿⽔平和竖直两个⽅向平铺（默认值） no- repeat:不平铺(图像位于元素的左上⾓，只显⽰⼀个)。 repeat-x:只沿⽔平⽅向平铺。 repeat-y:只沿竖直⽅向平铺 5.设置背景图像位置 如果将背景图⽚的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上⾓为基准点显⽰。 ⽰例： 效果： 在⽰例中，将body的背景图设置为不平铺，在浏览器中运⾏，背景图位于HTML页⾯的左上⾓，即body元素的左上⾓。 若是希望背景图⽚出现在其它位置，就需要另⼀个CSS属性background-position，设置背景图像的位置。 ⽰例： 如图中代码和效果所⽰，背景图像出现在了右上⾓。 在CSS中，background-position属性的值通常设置为两个，中间⽤空格隔开，⽤于定义背景图像在元素的⽔平和垂直⽅向的坐标，如上⾯的 right top。 background- position属性的 数认值为“0 0” 或 lefttop”，即背景图像位于元素的左上⾓。 background-position属性的取值有多种，具体如下。 (1)使⽤不同单位(最常⽤的是像素px)的数值：直接设置图像左上⾓在元素中的坐标，如 background- position:20px 20px;”。 (2)使⽤预定义的关键字：指定背景图像在元素中的对齐⽅式 ⽔平⽅向值：left、 center、 right。 垂直⽅向值：top、center、bottom。 两个关键字的顺序任意，若只有⼀个值则另⼀个默认为 center。例如： center　　　相当于 center center （居中显⽰） top　　 　 相当于 center top(⽔平居中、上对齐)。 (3)使⽤百分⽐：按背景图像和元素的指定点对齐。 0%0%　　表⽰图像左上⾓与元素的左上⾓对齐。 50%50