CSS（七） 背景

background-color

背景颜色，值为color值，例如#ffffff，或者一个rgb/rgba值，如果是rgba值，背景色有透明度的时候，并不会造成内容变透明，只会造成背景透明

background-image

可以写多个，多个用,号隔开，如果有多张图片，那么会叠加起来，并不是前面的找不到生效后面的，写在前面的在上层，写在后面的在下层

如果又有颜色，又有图片，那么颜色会在图片的下层，颜色永远在最底层

background-repeat

图片默认X轴，Y轴平铺的，同样也可以写多个值，以“，”号隔开，因为background-image有多个值，那么同样background-repeat的值对应background-image的值，但是，例如

background:no-repear repeat；这两个值没有以逗号隔开，说明是针对一个属性值作出的修饰，它的意思是，X轴不平铺，Y轴平铺，相当于值是repeat-y；

background-attachment

可以设置多个值，当内容过长时，背景是不是跟着滚动，还是背景是固定住的不跟着内容滚动

scroll：默认值，默认是不跟着滚动

local：背景跟着滚动

background-position

设置图片位置，可以多个值，例如：bacground-position:0 0这个就是左上角对焦，另外，之前讲到的精灵图，也是通过这个background-position设置的图片显示

线性渐变linear-gradient()

background-image:linear-gradient(20deg,red,blue,green)，linear-gradient(to right bottom,red,blue,green)，第一个是角度，第二个是颜色

径向渐变radial-gradient()

background-image:radial-gradient(circle 100px at 0 0,red,blue),正圆 半径100px 圆心在0 0, 颜色从红色到外边的蓝色

 

如果渐变要平铺则在前面加上repeating-,例如background-image:repeating-linear-gradient(red,green 20px,red 40px);

 

当设置了背景图片时，默认所在的盒模型位置是在padding-box，如果要设置在content-box，或者border-box，则用background-origin:context-box

background-clip:content-box，图片只显示在content-box的部分

 

background-size，设置图片的大小