美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

由布局学习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.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.          
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.       
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.              
    11.   
  
  
  
  11.                 Test background scope  
    12.   
  
  
  
  12.             
 
  •              
  •                 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）百分数

    将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.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.          
      5.   
  
  
  
    5.          
      6.   
  
  
  
    6.         #div3{  
      7.   
  
  
  
    7.         background-image:url(test.gif);  
      8.   
  
  
  
    8.         padding:50px;  
      9.   
  
  
  
    9.         width:100px;  
      10.   
  
  
  
    10.         height:100px;  
      11.   
  
  
  
    11.         border:2px solid green;  
      12.   
  
  
  
    12.         margin:50px;  
      13.   
  
  
  
    13.         background-position:20% 20%;  
      14.   
  
  
  
    14.         }  
      15.   
  
  
  
    15.         #div4{  
      16.   
  
  
  
    16.         background-image:url(test.gif);  
      17.   
  
  
  
    17.         padding:50px;  
      18.   
  
  
  
    18.         width:150px;  
      19.   
  
  
  
    19.         height:150px;  
      20.   
  
  
  
    20.         border:2px solid green;  
      21.   
  
  
  
    21.         margin:50px;  
      22.   
  
  
  
    22.         background-position:50px 50px;  
      23.   
  
  
  
    23.         background-repeat:no-repeat;  
      24.   
  
  
  
    24.         }  
      25.   
  
  
  
    25.         #div5{  
      26.   
  
  
  
    26.         background-image:url(test.gif);  
      27.   
  
  
  
    27.         padding:50px;  
      28.   
  
  
  
    28.         width:150px;  
      29.   
  
  
  
    29.         height:150px;  
      30.   
  
  
  
    30.         border:2px solid green;  
      31.   
  
  
  
    31.         margin:50px;  
      32.   
  
  
  
    32.         background-position:-50px -50px;  
      33.   
  
  
  
    33.         background-repeat:no-repeat;  
      34.   
  
  
  
    34.         }  
      35.   
  
  
  
    35.          
      36.   
  
  
  
    36.           
      37.   
  
  
  
    37.       
      38.   
  
  
  
    38.      
      39.   
  
  
  
    39.      
      40.   
  
  
  
    40.              
      41.   
  
  
  
    41.                 Test background scope  
      42.   
  
  
  
    42.              
      43.   
  
  
  
    43.              
      44.   
  
  
  
    44.                 Test background scope  
      45.   
  
  
  
    45.              
      46.   
  
  
  
    46.              
      47.   
  
  
  
    47.                 Test background scope  
      48.   
  
  
  
    48.              
      49.   
  
  
  
    49.              
      50.   
  
  
  
    50.                 Test background scope  
      51.   
  
  
  
    51.              
      52.   
  
  
  
    52.              
      53.   
  
  
  
    53.                 Test background scope  
      54.   
  
  
  
    54.              
      55.   
  
  
  
    55.          
      56.   
  
  
  
    56.      
      57.   
  
  
  
    57.       
      58.   
  
  
  
    58.  
      59.

    网站题目：由布局学习CSS：从CSS sprites重视background
    文章路径：http://www.zsjierui.cn/article/coiosji.html

    其他资讯