zoukankan      html  css  js  c++  java
  • CSS Sprites使用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

      CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
      在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。
      所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。
     
     CSS Sprites的使用:
        .bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
        #ico1 {容器宽度;height:容器高度;background-position:X坐标 Y坐标}
        #ico2 {容器宽度;height:容器高度;background-position:X坐标 Y坐标}
        #ico3 {容器宽度;height:容器高度;background-position:X坐标 Y坐标}
        .nav {容器宽度;height:容器高度;background-position:X坐标 Y坐标}
      当然也有简写方法:
        #ico1 {容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}
      其中,X坐标和Y坐标表示原图相对于ico1框左上角点的偏移量,即 坐标 0 0表示背景图和ico1框的左上角点重合
     
    例子:
      图片"bg_sprite.png"

    代码

    ico {width: 16px;height:16px;background: url("bg_sprite.png") no-repeat 0 -234px;}

    效果为:

    原文地址http://www.cnblogs.com/linxiong945/p/4087710.html

  • 相关阅读:
    腾讯开源 APIJSON 连创五个第一
    最火的分布式 HTAP 数据库 TiDB
    完爆Facebook/GraphQL,APIJSON全方位对比解析(三)-表关联查询
    后端自动化版本管理,再也不用改URL了!
    后端开挂:3行代码写出8个接口!
    3步创建服务端新表及配置
    Activity猫的一生-故事解说Activity生命周期
    APIJSON-以坚持和偏执,回敬傲慢和偏见
    APIJSON,让接口和文档见鬼去吧!
    Android 100多个Styles快速开发布局XML,一行搞定View属性,一键统一配置UI...
  • 原文地址:https://www.cnblogs.com/fozero/p/6337343.html
Copyright © 2011-2022 走看看