由布局学习CSS:从CSS sprites重视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之内有效,所以背景色和背景图片都在此范围内。


  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title></title> 
  5.         <style type="text/css" rel="stylesheet"> 
  6.         </style> 
  7.       
  8.     </head> 
  9.     <body> 
  10.             <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;"> 
  11.                 Test background scope  
  12.             </div> 
  13.             <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;"> 
  14.                 Test background scope  
  15.             </div> 
  16.         </div> 
  17.     </body> 
  18.       
  19. </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)点。



综合实例:


  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title></title> 
  5.         <style type="text/css" rel="stylesheet"> 
  6.         #div3{  
  7.         background-image:url(test.gif);  
  8.         padding:50px;  
  9.         width:100px;  
  10.         height:100px;  
  11.         border:2px solid green;  
  12.         margin:50px;  
  13.         background-position:20% 20%;  
  14.         }  
  15.         #div4{  
  16.         background-image:url(test.gif);  
  17.         padding:50px;  
  18.         width:150px;  
  19.         height:150px;  
  20.         border:2px solid green;  
  21.         margin:50px;  
  22.         background-position:50px 50px;  
  23.         background-repeat:no-repeat;  
  24.         }  
  25.         #div5{  
  26.         background-image:url(test.gif);  
  27.         padding:50px;  
  28.         width:150px;  
  29.         height:150px;  
  30.         border:2px solid green;  
  31.         margin:50px;  
  32.         background-position:-50px -50px;  
  33.         background-repeat:no-repeat;  
  34.         }  
  35.         </style> 
  36.           
  37.       
  38.     </head> 
  39.     <body> 
  40.             <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;"> 
  41.                 Test background scope  
  42.             </div> 
  43.             <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;"> 
  44.                 Test background scope  
  45.             </div> 
  46.             <div id="div3"> 
  47.                 Test background scope  
  48.             </div> 
  49.             <div id="div4"> 
  50.                 Test background scope  
  51.             </div> 
  52.             <div id="div5"> 
  53.                 Test background scope  
  54.             </div> 
  55.         </div> 
  56.     </body> 
  57.       
  58. </html> 



标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2