background 属性

一、background 属性集

值	说明
background-color	指定要使用的背景颜色
background-position	指定背景图像的位置
background-size	指定背景图片的大小
background-repeat	指定如何重复背景图像
background-origin	指定背景图像的定位区域
background-clip	指定背景图像的绘画区域
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。
background-image	指定要使用的一个或多个背景图像

 

二、属性集详解

1、background-color 

值	描述
color	指定背景颜色。颜色值有3种写法：文本、十六进制、RGB
transparent	指定背景颜色应该是透明的。这是默认

div{
    background-color:yellow;
}
h1{
    background-color:#00ff00;
}
p{
    background-color:rgb(255,0,255);
}

 

2、 background-position 

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

 

3、background-size

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

 

4、background-repeat

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复

 

5、background-origin

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

 

6、background-attachment

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

 

四、常见背景属性设置

body{
    background-image:url('图片地址');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}