5.3背景属性

背景属性

（1）设置背景颜色

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

(2)设置背景图像

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

（3）背景与图片不透明度设置

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);
}

opacity属性

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

（4）设置背景图像平铺

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

（5）设置背景图像的位置

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

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

（6）设置背景图像固定

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

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

（7）设置背景图像的大小

语法格式：

background-size：属性值1  属性值2
background-size: length|percentage|cover|contain;

（8）设置背景图像的显示区域

在默认情下，background-position属性总是以元素左上角为坐标原点定位背景图像，运用background-origin属性可以改变这种定位方式，自行定义背景图像的相对位置
语法格式
background-origin：属性值
属性值：padding-box ：背景图像相对于内边距区域来定位。
border-box：背景图像相对于边框来定位。
content-box：背景图像相对于内容来定位。

（9）设置背景图像的裁剪区域

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