大小覆盖顺序依次为: 内容区=>padding=>背景图=>border=>外边距
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-clip/origin/break
linear-gradient
radial-gradient
多背景图片/简写属性
1、background-color
2、background-image
background-image:url(images/url.png)
3、background-repeat
有以下属性值:
repeat
no-repeat
repeat-x
repeat-y
默认值为repeat
4、background-position
(1) 关键字值:
top
left
bottom
right
center
顺序不重要,任意两个组合起来都可作为该属性的值,如果只设定一个值,另一个取相同的值。
left top 元素的左上角和背景的左上角对齐
center center 元素的中心点和背景的中心点对齐
right bottom 元素的右下角和背景的右下角对齐
(2) 数字值
水平 垂直 如果只设定一个值,另一个为center。
水平数值距离的计算:
(元素宽-图片宽)*水平数值,
垂直距离的计算类似。
因此background-position:50% 50%和center center的效果相同。
5、background-size
background-size是css3中规定的属性。
(1) 百分值:相对于填充的元素的大小。
(2) 数值:缩放到指定的大小。
(3) cover:拉大图片,使其完全填满背景区,保持宽高比,可能发生裁剪。
(4) contain:缩放图片,使其桥好适合背景区,保持宽高比,可能留有空白。
6、background-attachment
用于控制背景图片是否随着元素的滚动而滚动,默认值为scroll,即跟随着滚动。
fixed表示不随着元素的滚动而滚动,例如在需要给body的中心添加水印时使用fixed。
7、background(简写属性)
没有特定的顺序 如果少了哪个属性值则用默认的属性值进行代替。
8、background-clip、background-origin、background-break
background-clip:控制背景绘制区域的范围,比如可以让背景色只显示在内容区域。
background-origin:控制背景定位区域的原点,可以设定为元素盒子左上角以外的位置。
background-break:控制分离元素(比如跨越多行的行内盒子的显示效果)
9、多背景图片
css3还可以给元素背景添加多个背景图片。
只需要给background写多个合并属性,使用逗号隔开即可。
10、背景渐变
(1) 线性渐变
a. 默认的线性渐变是从上到下的渐变
background:linear-gradient(#e86a43,#fff)
b. 如果想让渐变从左到右可以增加方向
background:linear-gradient(left,#64d1dd,#fff)(45度方向使用-45deg)
c. 渐变点设置
可以在想添加渐变点的地方,在颜色后面添加空格,写明位置(百分比)即可。
e.g.
.gradient1{
background:linear-gradient(#64d1dd,#fff 50%,#64d1dd);
//background:linear-gradient(#e86a43 20%,#fff 50%,#e86a43 80%);
}
(2) 放射性渐变
可以设置渐变中心点的位置,circle使渐变变的更加自然。
e.g. 50px 30px circle
.gradient1{
background:radial-gradient(#fff,#64d1dd,#70aa25);
//background:linear-gradient(circle,#fff,#64d1dd,#70aa25);
//background:linear-gradient(50px 30px,circle,#fff,#64d1dd,#70aa25);
}