css2和CSS3的background属性简写

1、css2:background:background-color || url("") || no-repeat || scroll || 0 0;

   css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black;

CSS2中的Background属性:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   也可以分解写成:
   background-color: color值 || RGBA值;
   background-image: url();
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-position: <length> || <per>

CSS3中的Background属性

   background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
   也可以分解写成:
   background-image: url();
   background-position: <length> || <per>
   background-size: <length> || <per>
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;
   background-color: color值 || RGBA值;

这里有点特别需要注意,如果使用联写方式时,background-size需跟在background-position的后面,并用“/”隔着,即"background-position/background-size"。另外本人强烈建议CSS3中的Background属性不要全部联写,最好把CSS3中的属性拆分出来单独书写,因为他们在不同浏览器下需要加上自己的前缀,如:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   background-size: <length> || <per>
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的,把各自的私有前缀加上。重温了一次两种标准下的Backgroud后,就正式进入今天的主题CSS3的多背景。

CSS3 Multiple backgrounds从字面而知,CSS3的多背景,其主要作用就是给同一个元素设置多个背景图像,换句话说,就是在同一元素上可以设置除background-color外多个background的其它属性,因为一个元素只具备一个背景色,但自从有了CSS3后,可以让同一个元素同时具有多个背景图像,并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。前面几句可能归纳的有点拗口,不太好理解,后面大家可以通过具体的实例来增加对他的理解。此时或许有朋友会问,那这个多背景我们在样式中要写backgrouds还是一样的background呢?这个问题问得很好,在以前读书学英语时,复数往往会多一个“s”,那我在这里大声告诉大家,CSS3的多背景我们不使用“backgrounds”而是继续使用"backgroud",况且W3C也没有“backgrouds”,至于具体的语法如下所示:

  background : [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
  也可以分解成:
  background-image: url1,url2,...,urlN;
  background-repeat: repeat1,repeat2,...,repeatN;
  background-position: position1,position2,...,positionN;
  background-size: size1,size2,...,sizeN;
  backrgound-attachment: attachment1,attachment2,...,attachmentN;
  background-clip: clip1,clip2,...,clipN;
  background-origin: origin1,origin2,...,originN;
  background-color: color;

取值说明:

1、background-image:此值用来设置元素的背景图片,可以使用相对地址或绝对地址索引背景图片,详细参考w3c的Background-image

2、background-repeat:此值用来设置元素的背景图片的平铺方式,其默认值为repeat,详细参考w3c的background-repeat

3、background-position:此值用来设置元素的背景图片的定位起点,其默认值为left top,详细参考w3c的background-position

4、background-size: 此值用来设置元素的背景图片的尺寸大小,其默认值为auto,详细参考《CSS3 Background-size》;

5、background-attachment:此值用来设置元素的背景图片是否为固定显示,其默认值为scroll,详细参考background-attachment

6、background-clip:此值用来控制元素的背景图片显示区域,其默认值为border-box,详细参考《CSS3 Background-clip》;

7、background-origin:此值用来控制元素的背景图片position的默认起始点,其默认值为padding-box,详细参考《CSS3 background-origin》;

8、 background-color: transparent; color: rgb(41, 180, 240); text-decoration: none; background-position: initial initial; background-repeat: initial initial;">background-color。

其中background-image需要多个,但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个,如果有多个背景图片时,其他属性只有一个时,那么表示所有背景图片应用了相同的属性设置,但background-color只能设置一个,如果你设置多少background-color将是一种错误的语法设置。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。