由布局學習CSS：從CSS sprites重視background

作者：肖雄 2012-03-31 10:12:55

關于CSS sprite技術的詳解，小弟在這里就不贅述了，在CSS sprite中最重要的就是關于background這個屬性的理解，所以本文比較詳細的介紹了background這個屬性，如有錯誤，勞請指教。

關于CSS sprite技術的詳解，小弟在這里就不贅述了，因為偉大的英特網上有一篇偉大的技術文檔介紹。請移步http://css-tricks.com/css-sprites/

在CSS sprite中最重要的就是關于background這個屬性的理解，所以本文比較詳細的介紹了background這個屬性，如有錯誤，勞請指教。

background的集合有： 'background-color', 'background-image', 'background-repeat', 'background-attachment','background-position', 和'background'。

在介紹background特性之前首先要明確background的作用范圍，background是在padding box之內有效，所以背景色和背景圖片都在此范圍內。

<!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）百分數

將background-position設置為百分數，可以將其歸結為跟蹤原則。background-position：x% y%,是指以圖片左上角為原點的A（圖片長度的x%，圖片高度的y%）點和以paddingbox的左上角為原點的B（paddingbox長度的 x%，paddingbox高度的y%）點,相合重合。

（2）數值將

background-position設置為數值，可以將其歸結為掛靠原則。background-position：Xpx Ypx,是指圖片的左上角掛靠的以paddingbox的左上角為原點的倒直角坐標系，B（Xpx， Ypx）點。例如：background-position:50px 50px，是指將圖片的左上角掛靠在以paddingbox的左上角為原點的倒直角坐標系，B（50px， 50px）點.background-position:-50px -50px,是指將圖片的左上角掛靠在以paddingbox的左上角為原點的倒直角坐標系，B（-50px， -50px）點。

綜合實例：

<!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

【編輯推薦】

淺談Web自動化測試原理
手機WEBKIT引擎HTML元素定位和事例
Node.js vs Opa: Web框架殺手
設計好脾氣的Web頁面
用3個步驟實現響應式Web設計

責任編輯：林師授來源：肖雄的博客

CSS WEB