css3之background

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.元素的背景顏色只能最後設置，沒有逗號分隔。

background-clip

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同樣。

background-origin

（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

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.保留了長寬比。

原文：http://www.css3files.com/background/