由布局學(xué)習(xí)CSS：從CSS sprites重視background
關(guān)于CSS sprite技術(shù)的詳解，小弟在這里就不贅述了，因?yàn)閭ゴ蟮挠⑻鼐W(wǎng)上有一篇偉大的技術(shù)文檔介紹。請(qǐng)移步http://css-tricks.com/css-sprites/
在CSS sprite中最重要的就是關(guān)于background這個(gè)屬性的理解，所以本文比較詳細(xì)的介紹了background這個(gè)屬性，如有錯(cuò)誤，勞請(qǐng)指教。
background的集合有： 'background-color', 'background-image', 'background-repeat', 'background-attachment','background-position', 和'background'。
在介紹background特性之前首先要明確background的作用范圍，background是在padding box之內(nèi)有效，所以背景色和背景圖片都在此范圍內(nèi)。
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css" rel="stylesheet">
- </style>
- </head>
- <body>
- <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
- Test background scope
- </div>
- <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
- Test background scope
- </div>
- </div>
- </body>
- </html>
background的核心屬性background-position
'background-position'
| Value: | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| Initial: | 0% 0% |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to the size of the box itself |
| Media: | visual |
| Computed value: | for <length> the absolute value, otherwise a percentage |
（1）百分?jǐn)?shù)
將background-position設(shè)置為百分?jǐn)?shù)，可以將其歸結(jié)為跟蹤原則。background-position：x% y%,是指以圖片左上角為原點(diǎn)的A（圖片長(zhǎng)度的x%，圖片高度的y%）點(diǎn)和以paddingbox的左上角為原點(diǎn)的B（paddingbox長(zhǎng)度的 x%，paddingbox高度的y%）點(diǎn),相合重合。
（2）數(shù)值將
background-position設(shè)置為數(shù)值，可以將其歸結(jié)為掛靠原則。background-position：Xpx Ypx,是指圖片的左上角掛靠的以paddingbox的左上角為原點(diǎn)的倒直角坐標(biāo)系，B（Xpx， Ypx）點(diǎn)。例如：background-position:50px 50px，是指將圖片的左上角掛靠在以paddingbox的左上角為原點(diǎn)的倒直角坐標(biāo)系，B（50px， 50px）點(diǎn).background-position:-50px -50px,是指將圖片的左上角掛靠在以paddingbox的左上角為原點(diǎn)的倒直角坐標(biāo)系，B（-50px， -50px）點(diǎn)。
綜合實(shí)例：
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css" rel="stylesheet">
- #div3{
- background-image:url(test.gif);
- padding:50px;
- width:100px;
- height:100px;
- border:2px solid green;
- margin:50px;
- background-position:20% 20%;
- }
- #div4{
- background-image:url(test.gif);
- padding:50px;
- width:150px;
- height:150px;
- border:2px solid green;
- margin:50px;
- background-position:50px 50px;
- background-repeat:no-repeat;
- }
- #div5{
- background-image:url(test.gif);
- padding:50px;
- width:150px;
- height:150px;
- border:2px solid green;
- margin:50px;
- background-position:-50px -50px;
- background-repeat:no-repeat;
- }
- </style>
- </head>
- <body>
- <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
- Test background scope
- </div>
- <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
- Test background scope
- </div>
- <div id="div3">
- Test background scope
- </div>
- <div id="div4">
- Test background scope
- </div>
- <div id="div5">
- Test background scope
- </div>
- </div>
- </body>
- </html>
原文鏈接：http://www.cnblogs.com/sc-xx/archive/2012/03/29/2423663.html
【編輯推薦】
