5.3 背景属性

3、背景属性

3.1 设置背景颜色

div{
    background-color:red; /*设置div背景颜色为红色*/
}

3.2 设置背景图像

背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在css中通过background-image属性设置背景图像。

body{
        background-color:red;  /*设置网页的背景颜色*/
        background-image:url(图片的路径)  /*设置网页的背景图像*/
}

3.3 背景与图片不透明的设置

3.3.1 RGBA模式

RGBA是css3新增的颜色模式，它是RGB颜色模式的延伸，改模式是在红、绿、蓝三原色的基础上添加了不透明的度参数。
格式：
rgba( r，g，b，alpha );
在上面的语法格式中，前三个参数与RGB中的参数含义相同，alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。
例：
使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景，

p{
    background-color:rgba( 255,0,0,0.5);
}

3.3.2 opacity属性

使用opacity属性能够使任何元素呈现出透明效果。
格式：
opacity：opacityValue；
opacity属性用于定义元素的不透明，参数opacityValue表示不透明度的值，它是一个介于0~1的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示变透明。

img{ 
    opacity:0.5  /*设置图片半透明状态*/
}

3.4 设置背景图像平铺

语法格式：
background-repeat:值
可以取值为：1、repeat：沿水平和竖直两个方向平铺（默认值）。
2、no-repeat：不平铺（图像位于元素的左上角，只显示一个）。
3、repeat-x：只沿水平方向平铺。
4、repeat-y：只沿竖直方向平铺。

3.5 设置背景图像的位置

在css中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，如：“background-position：right top”，即背景图像位于元素的左上角。
background-position属性的取值有多种：
1、使不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标，如background-position：20px 20px；。
2、使用预定义的关键字：指定背景图像在元素中的对齐方式。
（1）、水平方向值：left、center、right
（2）、垂直方向值：top、center、bottom
两个关键字的顺序任意，若只有一个值则另一个默认为center，例如：center相当于 center center（居中显示） top 相当于 center top （水平居中、上对齐）。
3、使用百分比：按背景图像和元素的指定点对齐。
（1）、0% 0%：表示图像左上角与元素的左上角对齐。
（2）、50% 50%：表示图像50% 50%中心点与元素50% 50%的中心点对齐。
（3）、20% 30%：表示图像20% 30%的点与元素20% 30%的点对齐。
（4）、100% 100%：表示图像右下角与与元素的右下角对齐，而不是图像充满元素。
如果只有一个百分数，将作为水平值，垂直值则默认为50%。

body{
    background-image:url(image/win.jpg);  /*设置网页的背景图像*/
    background-repeat:no-repeat;   /*设置背景图像不平铺*/
    background-position:50% 50%    /*用像素值控制背景图像的位置*/
}

3.6 设置背景图像固定

如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background-attachment属性来设置。
background-attachment属性有两个属性值，分别代表不同的含义。
1、scroll：图像随页面元素一起滚动（默认值）。
2、fixed：图像固定在屏幕上，不随页面元素滚动。

body{
    background-image:url(image/win.jpg);  /*设置网页的背景图像*/
    background-repeat:no-repeat;   /*设置背景图像不平铺*/
    background-position:50% 50%    /*用像素值控制背景图像的位置*/
    background-attachment:fixed;   /*设置背景图像的位置固定*/
}

3.7 设置背景图像的大小

语法：
background-size：属性值1 属性值2
background-size: length|percentage|cover|contain;
在上面的语法格式中，background-size属性可以设置一个或两个值定义鳖精图像的宽高，其中属性值1位必选属性值，属性值2位可选属性值。属性值可以使像素值、百分比、“cover”或“contain”关键字。

div{
  background:url(img_flwr.gif);
  background-size:80px 60px;
  background-repeat:no-repeat;
}

3.8 设置背景的显示区域

background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
语法：
background-origin: padding-box|border-box|content-box;

div{
  background-image:url('smiley.gif');
  background-repeat:no-repeat;
  background-position:left;
  background-origin:content-box;  /*背景图像相对文本的内容定位*/
}

3.9 设置背景图像的裁剪区域

语法格式：
background-clip：属性值；
属性值：
1、border-box：默认值，从边框区域向外裁剪背景。
2、padding-box：从内边距区域外裁剪背景。
3、content-box：从内容区域向外裁剪背景。