由布局学习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.csdahua.cn/qtweb/news24/385174.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    微信公众号知识

    分类信息网

    攀枝花SEO　　 　成都做网站　　 　混凝土搅拌车　　 　绵竹网站建设　　 　中国电信成都枢纽中心　　 　广安搬家公司　　 　光华村机房　　 　橡塑板　　 　免备案空间腾讯云　　 　成都公司注册　　 　成都光华电信机房　　 　手机网站建设　　 　服务器租用　　 　myfdjwx.com　　 　四川成都做网站　　 　移动网站建设　　 　重庆网络营销　　 　成都宣传海报　　 　晟和广告　　 　做网站