web前端 > web前端
web前端web前端

css3新增背景属性

一、CSS背景属性回顾

background-image
background-color
background-repeat
background-position
background-attachment

二、CSS3新增背景属性

1.设置背景尺寸  background-size   确定图片的大小
background-size:x y;  //水平 垂直;值可以为像素、百分比、auto等
background-size:cover;  //保持宽高比不变,保证占满盒子,但是不一定能看到全部图
background-contain;  //保持宽高比不变,保证看清全图,但是不一定占满盒子

2.多背景  background-image
background-image:url(1.jpg),url(2.jpg);  多个背景以逗号隔开,无限个数

3.背景起始区域  background-origin     确定定位的原点
background-origin:border-box;  //从border区域起始
background-origin:padding-box;  //默认值,从padding区域起始
background-origin:content-box;  //从内容部分起始

4.背景显示区域 background-clip  确定背景填充区域
  background-clip:border-box;  //默认值,从border区域开始显示背景
  background-clip:padding-box;  //从padding区域开始显示背景
  background-clip:content-box;  //从内部区域开始显示背景
  background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment 

三、新增颜色与渐变色

1.新增颜色
  rgba,在rgb的基础上多了一个a透明度数值,取值范围0~1,0为完全透明,1为完全不透明
  hsl,H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360,S:Saturation(饱和度)。取值为:0.0% - 100.0%,L:Lightness(亮度)。取值为:0.0% - 100.0%。

2.渐变色
线性渐变 linear-gradient()  从某个方位 渐变到某个方位
径向渐变 radial-gradient()  从某个点 向四周渐变
重复渐变
在使用时需要加上 –webkit-兼容前缀

web前端ruitiancnweb前端z_vae@sina.com

web前端