背景单个属性
背景符合属性
注意:复合属性会覆盖前面的单个属性,反之则不会
在CSS3中,背景定位得到了扩展,它允许我们指定背景图片在距离任意角的偏移量,只需要在偏移量前面指定关键字
background-position:right 20px bottom 10px;使用时单独设置。也可以使用background-origin:content-box实现
background-size
background-size:x y; //水平 垂直;值可以为像素、百分比、auto等
background-size:cover; //保持宽高比不变,保证占满盒子,但是不一定能看到全部图
backgroundsize:contain; //保持宽高比不变,保证看清全图,但是不一定占满盒子
background-image
background-image:url(1.jpg),url(2.jpg); 多个背景以逗号隔开,无限个数
background-origin
background-origin:border-box; //从border区域起始
background-origin:padding-box; //默认值,从padding区域起始
background-origin:content-box; //从内容部分起始
background-clip
//从什么地方看到图片
background-clip:border-box; //默认值,从border区域开始显示背景
background-clip:padding-box; //从padding区域开始显示背景
background-clip:content-box; //从内部区域开始显示背景
rgb
:rgb为三原色,取值范围为0~255hsl
:H
:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360,S
:Saturation(饱和度)。取值为:0.0% - 100.0%,L
:Lightness(亮度)。取值为:0.0% - 100.0%。 100%纯白色rgba,hsla
:在上面的基础上多了一个a透明度数值,取值范围0~1,0为完全透明,1为完全不透明线性渐变很简单,这里说一下经向渐变。
//标准写法
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
//-webkit-老版本径向渐变的写法
-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)
注意:在使用时需要加上 –webkit-兼容前缀 IE低版本兼容filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1')
.