广元网站建设

专注高端品牌网站建设行业优质供应商！认准优众联杰建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    广元优众联杰建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 优众联杰建站
  • 联系我们

    • 由布局学习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://zjjierui.cn/article/coiosji.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：成都市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    广元优众联杰建站公司是一家专注从事于高品质视觉体验及互联网设计开发，广元网站建设，广元网站设计，广元网页设计，广元网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，优众联杰建站位于广元市龙岗区大运软件小镇，优众联杰建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    400电话办理   棕树数据中心   成都写真喷绘   鸿艺文化   成都UV喷绘打印   whjierui.cn   成都网站设计   成都门窗定制   温江做网站   成都发电机公司   

    Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 All Rights Reserved   蜀ICP备2024116266号-5

    Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 

    蜀ICP备2024116266号-5