CSS3的背景background

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;

一、设置背景色：background-color

  background-color: transparent || <color>

background-color其主要用来设置元素的背景颜色，其默认值为transparent（不设置任何颜色情况下是透明色），<color>用来设置背景色彩，常用的颜色格式为：颜色名：如“red”；rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%)；hls值hsl(0, 100%, 50%)，二进制值 #FF0000。在支持CSS3的浏览器中还可以使用rgba值rgba(255,0,0,1)。

二、设置背景图片:background-image

  background-image: none || <url>

background-image其主要用来设置元素的背景图片，默认值为none，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。

三、设置背景图片重复：background-repeat

  background-repeat: repeat || repeat-x || repeat-y || no-repeat

background-repeat是用来设置background-image在元素中的铺放格式的，其默认为repeat，也就是背景图片沿元素的X轴和Ｙ轴同时平铺，另外几个值分别表示repeat-x：背景图片仅沿Ｘ轴水平平铺，repeat-y背景图片仅沿Ｙ轴平铺，no-repeat表示背景图片不做任何铺放格式设置。

四、设置背景图像是否固定或者随着页面的其余部分滚动:background-attachment

  background-attachment: scroll || fixed

background-attachment主要是用来设置背景图像是否固定或者随着页面的其余部分滚动，，其默认值为scroll，表示背景图片会随滚动条一起滚动，而取值fixed时，背景图片固定不动。

五、设置背景图片的位置background-position

   background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]

background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left, center, top, right, top, bottom配合设置，而其中以下几种表示相同定位方式：

　　"top left","left top"和"0% 0%","0,0"代表元素的左上角；

　　"top","top center","center top"和"50% 0"表示在元素顶边居中位置；

　　"right top","top right"和"100% 0"代元素的是元素的右上角位置；

　　"left","left center","center left"和"0% 50%"表示在元素左边中间位置；

　　"center","center center"和"50% 50%"表示在元素中间位置；

　　"right","right center","center,right"和"100% 50%"表示在元素右边中间位置；

　　"bottom left","left bottom"和"0% 100%"表示在元素的左下角；

　　"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；

　　"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置

六、设置背景图片大小background-size

　　background-size: auto || <length> || <percentage> || cover || contain　　　　

取值说明：

1、auto:此值为默认值，保持背景图片的原始高度和宽度；

2、<length>此值设置具体的值，可以改变背景图片的大小；

3、<percentage>此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

　　有一点需要特别注意，图片大小不是按背景图片大小的百分数来计算，而是装截背景图的元素百分比计算，div容器的大小是200px的宽100px的高，此时的背景图片大小将根据div.demo的宽和高的百分比计算，这样一来，背景图片的宽就是200px*80%等于160px;而背景图片的高同样是100px*50%等于50px；如果有内边距的话还需要加上padding的值一起计算。另外当其只取一个值时，那么宽度和高度将相同，相当于background-size: 80％ auto。

4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；

5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。

当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

　1>background-size和其他的一些CSS3属性一样，需要加上自己的别名

　2>在ＩＥ中有一个滤镜是类似于cover的功能，

   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’);

   -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’)”;

　　如果使用滤镜的话，background-size:cover；只有在IE6中不支持了

　3>只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形失真。

七、设置背景的裁剪区域background-clip

  background-clip ： border-box || padding-box || content-box

取值说明：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background，但有一点需要注意，background-color是从元素的边框左上角起到右下角止，而background-image却不一样，他是从padding边缘的左上角起而到border的右下角边缘止.即元素background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处）

  .demo {

     width: 220px;

     height: 115px;

     padding: 20px;

     border: 20px dashed rgba(255,0,0,0.8);

     background: green url("../images/box-shadow-img.png") no-repeat;

     font-size: 16px;

     font-weight: bold;

     color: red;

   }

下面的效果就更清晰的说明了上面那句话：

但如何能让他们在统一的位置显示呢？background-clip，这个属性就会让背景色和背景图片统一在相同的位置，前面也简单说过，background-clip会根据不同的属性值进行裁剪多了的背景部分。

background-clip和background-size一样，在各种浏览器内核下，都具有自己的私有前缀，但background-clip在Mozilla下分得特别的细，那么先来看看background-clip在Mozilla下的语法规则：Mozilla内核（如Firefox）在3.6版本以下是不支持border-box;padding-box;content-box的语法规则，其语法如下：

1、Firefox3.6版本以下（包含3.6版本）：

  -moz-background-clip: border || padding   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

2、Firefox4.0版本以上：

Firefox4.0版本以上，支持border-box,padding-box,content-box并且无需带上其前缀，如果你一不小心带上了“-moz”，那么在Firefox4.0+版本反而是一种错误的写法

  background-clip:  border-box || padding-box || content-box /*Firefox 4.0+ (Gecko)*/

详细的大家可以到Mozilla.org查看background-clip | -moz-background-clip。虽然网上介绍Opera在9.6+版本就支持-o-background-clip属性的使用，但其实是存在bug的，直到Opera11才正式支持。如此一来，background-clip兼容各浏览器的正确写法应该如下：

   /*Firefox3.6-*/

   -moz-background-clip: border || padding;

   /*Webkit*/

   -webkit-background-clip: border-box || padding-box || context-box;

   /*W3C标准 IE9+ and Firefox4.0+*/

   background-clip: border-box || padding-box || context-box;

　　在webkit下background-clip还有一个更神奇的效果，就是可以让图片填充文本，那就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent；

   .text {

      font-size: 40px;

      text-transform: uppercase;

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

   }

效果：

到目前为止只有Safari和Chrom才能实现用背景图片来填充文本的效果，如果是在iphone上开发的朋友，这个功能制作一些特殊效果还是蛮实用的。其实background-clip中的padding-box和content-box在实际应用中也是蛮有用处的。

   .facebook {

	background: #3B5A98;

	border: 20px solid rgba(134,134,134,0.8);

	padding: 10px;

	color: #fff;

	text-align: center;

	width: 150px;

	height: 65px;

	line-height: 65px;

	-moz-border-radius: 15px;

	-webkit-border-radius: 15px;

	border-radius: 15px;

	font: bold 25px Airal;

	-moz-background-clip: padding;

	-webkit-background-clip: padding-box;

	-o-background-clip: padding-box;

	background-clip: padding-box;

   }

效果：

上面介绍了一个使用background-clip:padding-box配合border-color:rgba（）值制作了一个Facebook弹出窗口，边框带有透明并能显示底下的内容

八、设置背景图片的定位原点background-origin

　　background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（background-position的原点）

为了兼容新老版本的浏览器，在使用background-origin改变background-position的原点位置时，最好老旧语法一起加上，并且新语法放在老语法后面，这样只要是支持新语法规则的浏览器就自动会识别background-origin的最新语法

 background-origin: padding || border || content //旧语法

 background-origin: padding-box || border-box || content-box  //新语法

取值说明：

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

有一点需要提出，在IE8以下版本解析是不一样的，在IE7以下版本background-origin默认是从border开始显示背景图片。

   /*Old Webkit and Gecko*/

   -moz-background-origin: padding || border || content;

   -webkit-background-origin: padding || border || content;

   /*New Webkit and Gecko*/

   -moz-background-origin: padding-box || border-box || content-box;

   -webkit-background-origin: padding-box || border-box || content-box;

   /*Presto*/

   -o-background-origin: padding-box || border-box || content-box;

   /*W3c标准*/

   background-origin: padding-box || border-box || content-box;

　　padding-box是background-origin的默认值，也就是说background-origin:padding-box就是使用background-position的起点在"left top"位置处，也是background-position的默认值。background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处）

注意：如果将background-attachment设置为fixed时，background-origin将不起任何作用。并且background-origin取任何值将不会影响body中background-image的任何设置

最后总结一下，background-clip主要是用来控制背景（背景色和背景图片）的显示区域，其主要配合background-origin来制作不同的效果；而background-origin主要是用来控制背景图片的background-position位置，并且其只能控制背景图片。

九、多背景

　　在同一元素上可以设置除background-color外多个background的其它属性，因为一个元素只具备一个背景色，但自从有了CSS3后，可以让同一个元素同时具有多个背景图像，并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。

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;

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

　　CSS3 Multiple Backgrounds在各支持的浏览器下都是统一写法，不需要加上自己的前缀，但如果你使用background-size,background-clip,background-origin时，还是需要另提出写上各浏览器的前缀。

　　多背景图片的显示顺序是跟其加载的先后顺序有关，并不跟定位的先后有关

转载自http://www.w3cplus.com/

巴特西

CSS3的背景background

最新文章

热门文章