好看的历史书籍推荐,玄幻小说排行榜完本,小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

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

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

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

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

 
 
 
   
  
  
     
  
  
     
  
  
         
  
  
             
  
  
             
  
  
             
  
  
          
  
  
         
  
  
         
  
  
                 
  
  
                  Test background scope

Test background scope

background的核心屬性background-position

'background-position'

Value:	[ [ \| \| left \| center \| right ] [ \| \| 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 the absolute value, otherwise a percentage

（1）百分數(shù)

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

（2）數(shù)值將

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

綜合實例：

 
 
 
   
  
  
     
  
  
     
  
  
         
  
  
             
  
  
             
  
  
          #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;    
  
  
          }    
  
  
             
  
  
              
  
  
          
  
  
         
  
  
         
  
  
                 
  
  
                  Test background scope

Test background scope

新聞中心

其他資訊