CSS的background背景屬性

1、css的background背景屬性文檔樹中的每個元素只是一個矩形盒子，這些盒子都有一個背景層，背景層可以是徹低透亮或者其它色彩，也可以是一張。此背景層由8個css屬性（加上1個簡寫的屬性）控制。background-colorbackground-color屬性設置元素的背景色彩。它的值可以是隨意合法的色彩值或者是transparent關(guān)鍵字。.leftbackground-color:ffdb3a;.middlebackground-color:67b3dd;.rightbackground-color:transparent;1.png相關(guān)教程：css視頻教程背景色彩繪制在由backgr

2、ound-clip（backgroundclip）屬性指定的盒模型的區(qū)域內(nèi)。假如還設置了任何背景圖像，則在它們后面繪制色彩層。與可以有多個的圖像層不同，對于一個元素，我們只能有一個色彩層。background-imagebackground-image屬性定義元素的一個或多個背景圖像。它的值通常是用url（）符號定義的圖像的url。也可以用法none作為它的值，但這樣會生成一個空的背景層.leftbackground-image:url(&39;ire.png&39;);.rightbackground-image:none;2.png我們也可以指定多張背景并通過逗號分隔。后面

3、的都會繪制在z軸方向上前一個的后面。.middlebackground-image:url(&39;khaled.png&39;),url(&39;ire.png&39;);/*otherstyles*/background-repeat:no-repeat;background-size:100px;3.pngbackground-repeatbackground-repeat屬性控制背景在被background-size（backgroundsize）屬性轉(zhuǎn)變了大小及被background-position（backgroundposition）屬性定位后如

4、何平鋪。該屬性的值可以是repeat-x,repeat-y,repeat,space,round,no-repeat關(guān)鍵字，除了repeat-x和repeat-y,其他值可以為x軸和y軸定義一次，也可以單獨定義每個維。.top-outer-leftbackground-repeat:repeat-x;.top-inner-leftbackground-repeat:repeat-y;.top-inner-rightbackground-repeat:repeat;.top-outer-rightbackground-repeat:space;.bottom-outer-leftbackgrou

5、nd-repeat:round;.bottom-inner-leftbackground-repeat:no-repeat;.bottom-inner-rightbackground-repeat:spacerepeat;.bottom-outer-rightbackground-repeat:roundspace;4.pngbackground-sizebackground-size屬性定義背景的大小，它的值可以是關(guān)鍵字，長度或者百分比?？捎糜诖藢傩缘年P(guān)鍵字為contains和cover。contain將等比縮放圖像到最大的大小。另一方面，cover將把圖像縮放到盡可能小的尺寸，其中囫圇背景

6、區(qū)域仍然被籠罩。.leftbackground-size:contain;background-image:url(&39;ire.png&39;);background-repeat:no-repeat;.rightbackground-size:cover;/*otherstylessameas.left*/5.png對于長度和百分比，我們可以同時指定背景的寬高，百分比值是按照元素的大小計算的。.leftbackground-size:50px;/*otherstylessameas.left*/.rightbackground-size:50%80%;/*othersty

7、lessameas.left*/6.pngbackground-attachmentbackground-attachment屬性控制控制背景圖像相對于視口和元素的滾動方式。它有三個潛在的值。fixed意味著背景固定在視口并且不會移動，即用法戶正沿著視口滾動。local意味著背景固定在它在元素中的位置。假如這個元素可以滾動并且背景定位在頂部，那么當用戶向下滾動這個元素，背景將會從視圖中滾出去。最后scroll意味著背景是固定的且不會隨著元素內(nèi)容的滾動而滾動。.leftbackground-attachment:fixed;background-size:50%;background-image

8、:url(&39;ire.png&39;);background-repeat:no-repeat;overflow:scroll;.middlebackground-attachment:local;/*otherstylessameas.left*/.rightbackground-attachment:scroll;/*otherstylessameas.left*/background-position這個屬性結(jié)合background-origin屬性定義背景的起始位置應在何處。它的值可以是關(guān)鍵字，長度或者百分比，我們可以指定沿x軸和y軸的位置。可用于此屬性的關(guān)鍵字為t

9、op,right,bottom,left,和center，我們可以隨意組合這些關(guān)鍵字，假如只明確指定了一個關(guān)鍵字，那么另外一個默認就是center。.top-leftbackground-position:top;background-size:50%;background-image:url(&39;ire.png&39;);background-repeat:no-repeat;.top-middlebackground-position:right;/*otherstylessameas.top-left*/.top-rightbackground-position:bo

10、ttom;/*otherstylessameas.top-left*/.bottom-leftbackground-position:left;/*otherstylessameas.top-left*/.bottom-rightbackground-position:center;/*otherstylessameas.top-left*/8.png對于長度和百分比，我們也可以指定沿x軸和y軸的位置。百分比值是按元素的大小計算的。.leftbackground-position:20px70px;/*otherssameas.top-left*/.rightbackground-positi

11、on:50%;/*otherssameas.top-left*/9.pngbackground-originbackground-origin屬性指定背景應按照盒模型的哪個區(qū)域舉行定位。當值為border-box時，背景的位置按照邊框區(qū)域定位，為padding-box時其位置按照邊距區(qū)域定位，為content-box時其位置按照內(nèi)容區(qū)域定位。.leftbackground-origin:border-box;background-size:50%;background-image:url(&39;ire.png&39;);background-repeat:no-repeat;

12、background-position:topleft;border:10pxdottedblack;padding:20px;.middlebackground-origin:padding-box;/*otherstylessameas.left*/.rightbackground-origin:content-box;/*otherstylessameas.left*/10.pngbackground-clipbackground-clip屬性確定背景繪制區(qū)域，這是背景可以被繪制的區(qū)域。和background-origin屬性一樣，它也基于盒子模型的區(qū)域。.leftbackground-clip:border-box;background-size:50%;background-color:ffdb3a;background-repeat:no-repeat;background-position:topleft;border:10pxdottedblack;padding:20px;.middlebackground-clip:padding-box;/*otherstylessameas.left*/.rightbackground-clip:content-box;/*otherstylessamea