css3之background

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

background: （1）url(image1.png) right bottom, （2）url(image2.png) center, （3）url(image3.png) （4）rgba( 0,0,0,0.35)

(1)The first background image. This is the image that is closest to the viewer. Every background image can have the general values of the background property, where the most important arebackground-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.第一张背景图是最靠近可视层的。每一个背景图都有通用的背景属性，最重要的是background-position和bckground-repeat。默认是定位在左上角，而且x与y轴重复。
(4)The general background color of the element. Can be only set last, no comma preceded.元素的背景颜色只能最后设置，没有逗号分隔。

Sets the visible range of the background including background images.设置背景图片的有效范围

（1）border-box ，（2）padding-box，（3）content-box

（1）By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible
to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead,content is not supported).元素默认的背景绘制在边框之下，也就是边框会覆盖背景层（默认值border-box）。可以使用paddng-box和content-box来改变这种行为。
（2）If a border is set the background starts directly within it, everything outside gets clipped. Same as the default value (border-box) when no border is set.如果在元素设置了边框，超出位置会被截取。即不会绘制到border之下。与不设置border的border-box一样效果。
（3）If a padding is set the background gets applied within it, everything outside is clipped. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.如果背景设置了padding，除了内容外都截取。与没有padding的padding-box一样，与没有设置padding和border的padding-box，border-box一样。

（1）padding-box ，（2）border-box，（3）content-box

（1） When background images are applied they directly start at the outer dimensions of the containing element (= padding-box, default value). In the presence of a border they start directly within it. Can also be content-box or border-box (Firefox 3.6 uses padding,content and border).当设置背景图片时，它是从元素的边界开始（默认是padding-box）。如果存在边框，则在边框内开始。还可以设置content-box和border-box。
（2）If a border is set it covers the background images. Same as padding-box when no border is set.如果设置了边框，而且设置border-box，边框就会覆盖在背景图上。如果没有设置边框则与padding-box一样。
（3）If a padding is set the background image gets applied within it. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.设置了content-box，如果设置了padding，背景图则应用于padding内。和没有设置padding的padding-box一样，和没有设置border与padding的botder-box、padding-box一样。

background-size:（1）50% 100%, （2）33% 33%, auto, 100px

The horizontal size of the background image, in this case 50% of the width of the element (not of the original image size). 第一个值50%是指背景图为元素宽度的50%（并不是原始图的尺寸）Can also be set in absolute (px) or relative (em) units, can be auto (original size, default),cover or contain. 也可以是px或者em，也可以是auto，cover和contain关键字。In combination with multiple background images the different values are separated by commas.多个背景图时用逗号隔开。（x y 当缺省状态则为auto，例如最后一个则是100px auto）

background-size: cover

The background image is resized so that either its width or height (the smaller one) covers the whole element. The aspect ratio is preserved.背景图会重置宽度或者高度(小者)以覆盖整个元素（必定保证整个元素被覆盖）。保留了长宽比。

background-size: contain

The background image is resized so that its width or height (the bigger one) fits inside the element. 背景图会重置以至于宽或高（大者）填满元素The aspect ratio is preserved.保留了长宽比。