云锦诚建站，专注安岳网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：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
    分享URL：http://www.scanyue.cn/article/coiosji.html

    其他资讯