CSS3对于背景的改动

2012-11-07
  • 1002
  • 0

CSS3的改动中,其实不仅仅限于盒样式,动画和布局等做出了调整,其实在背景相关的属性上也出了新的属性!今天就和大家介绍下CSS3对于background的属性追加,以及这些改动对我们带来的影响

CSS3对于背景新增了如下的属性

Background-clip 用来指定背景显示范围

Background-origin 用来确定背景图像起点位置

Background-size 规定背景图像大小

Background-break 指定内联背景平铺显示时的循环方式

同样对于新增的属性,如在Firefox中在书写样式的时候要在属性前加上-moz-,对于新增的background-break却是一个特例需要写成-moz-background-inline-policy

前两者的合理运用可以代替我们在做背景图像的时候需要移动层的位置来达到我们需要的效果,所以这样的改动对于布局来说可以避免增加很多不必要的背景层

Background-clip的值可以指定为borderpaddingmargin,如果设置成border那么背景的显示范围是边框线以内(包括边框线),如果是padding,则背景的范围到内边距的最大范围为止,不会包括外边距和边框

我们都知道在绘制背景图像时,默认是从内边距区域的左上角开始,但是有了background-origin属性后我们便可以自己指定开始绘制的位置是从边框左上角还是内容的左上角开始,所以这个属性的值就有borderpaddingcontent分别指定边框左上角、内边距左上角、内容左上角开始绘制

如上图所示指定层显示的模式,可以通过这样的属性指定背景的外边距边框或者内边距的不显示