R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS基础 >

              CSS基础必学列表

              DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

              div css sprites精灵-DIVCSS5学习网图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇

              div css sprites拼合背景图片素材实现布局效果截图
              css sprites拼合背景图片素材实现布局效果截图

              一、什么是css sprites   -   TOP

              css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。

              css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

              二、适合与不适合DIV CSS sprites拼合布局   -   TOP

              1、适合:一般小图标素材
              小的图标ico类素材,一般图标很小十多像素几十像素的宽度高度,这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数,但很快加载完又会释放。

              2、不适合:大图大背景
              大背景一般用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来使用css sprites背景定位布局。

              3、sprites适合推荐小结
              一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

              三、div css sprites优势与缺点劣势判断选择   -   TOP

              1、sprites优势:
              若干小图标拼合成一张图后布局,减少http iis请求数,对于大战大流量网站来说隐形优势很显然的,从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵,使用DIVCSS5学习网 Sprites这样可以大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,同时也减少图片文件数目。


              2、sprites缺点
              在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;

              CSS Sprites在开发的时候比较麻烦,你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;

              CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情

              由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

              3、DIVCSS5推荐小结
              犹豫拼接图片需要一定经验技巧(做实践即可快速掌握)、测量定位数值、修改不是那么灵活等原因,一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites,因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力,所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用,这样比较值得。

              四、div css sprites实例示例教程   -   TOP

              1、素材与要实现效果截图

              拼合ico图标素材实现列表不同图标效果截图
              拼合ico图标素材实现列表不同图标效果截图

              2、sprites实例教程解释介绍
              首先这些图标素材是放在同一张图片上(PS拼合),然后实现成列表类布局,列表每个前图标不同。使用div css sprites实现此布局(其实使用background样式实现)。

              首先此列表布局我们使用ul li列表布局,每个li站一行排版,对ul设置padding实现四周内容与边框一定间距效果,因为每个li前面图标不同,但此背景图片是拼合在一张图片上,所以这里做li里开始使用span标签实现这个不同图标效果,每个图标不同为了区别span所以对span设置不同class,不同class对应设置定位相应的图标。

              3、实例教程准备
              1)、初始化模板使用:为了兼容各大浏览器,仍然这里使用DIVCSS5提供初始化模板,在此模板基础上修改设置符合本实例CSS样式。
              2)、图标素材,这里直接为大家提供拼接好的图标素材图片一张,命名为“ico.png”,如下图,可直接另存为保存使用。

              sprites图片素材
              sprites案例图片素材(直接点击图片鼠标右键可以另存为保存使用)

              4、先布局出效果,再css sprites设置不同背景图标样式
              1)、关键html代码:

              1. <ul class="Sprites"> 
              2.     <li><span class="a1"></span><a href="#">WORD文章标题</a></li> 
              3.     <li><span class="a2"></span><a href="#">PPT内容标题</a></li> 
              4.     <li><span class="a3"></span><a href="#">Excel内容标题</a></li> 
              5.     <li><span class="a4"></span><a href="#">PDF内容标题</a></li> 
              6.     <li><span class="a5"></span><a href="#">文本文档标题</a></li> 
              7. </ul> 

              为了区别不同效果对span加入不同class。
              2)、关键CSS代码

              1. ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
              2. ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
              3. ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
              4. overflow:hidden;background:url(ico.png) no-repeat} 
              5. ul.Sprites li a{ padding-left:5px} 

              3)、效果截图

              未使用sprites技术引入背景图片效果截图
              未使用sprites技术引入背景图片效果截图

              4)、使用css sprites设置定位背景完整关键CSS代码

              1. ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
              2. ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
              3. ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
              4. overflow:hidden;background:url(ico.png) no-repeat} 
              5. ul.Sprites li a{ padding-left:5px} 
              6. ul.Sprites li span.a1{ background-position: -62px -32px} 
              7. ul.Sprites li span.a2{ background-position: -86px -32px} 
              8. ul.Sprites li span.a3{ background-position: -110px -32px} 
              9. ul.Sprites li span.a4{ background-position: -133px -32px} 
              10. ul.Sprites li span.a5{ background-position: -158px -32px} 

              最终实现浏览器效果测试效果图

              css sprites案例效果截图
              div css sprites案例效果截图

              5)、css sprites关键代码与解释

              1. ul.Sprites li span.a1{ background-position: -62px -32px} 
              2. ul.Sprites li span.a2{ background-position: -86px -32px} 
              3. ul.Sprites li span.a3{ background-position: -110px -32px} 
              4. ul.Sprites li span.a4{ background-position: -133px -32px} 
              5. ul.Sprites li span.a5{ background-position: -158px -32px} 

              首先对ul.Sprites li span引入背景
              ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。
              再分别对不同span class设置对于图标背景定位具体值
              ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px,向上“拖动”32px开始显示此背景图标
              ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px,向上“拖动”32px开始显示此背景图标
              ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px,向上“拖动”32px开始显示此背景图标
              ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px,向上“拖动”32px开始显示此背景图标
              ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px,向上“拖动”32px开始显示此背景图标

              关键:背景background-position有两个数值,前一个代表靠左距离值(可为正可为负),第二个数值代表靠上距离值(可为正可为负)
              背景background-position有两个数值可以为正可以为负,当为正数时,代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片;当为负数时代表背景图片作为盒子对象背景图片,将背景图片拖动超出盒子对象左边多远,拖动超出盒子对象上边多远开始显示此背景图片。

              6)、背景图片定位数值获取
              向左“拖动”,向上“拖动”这些这PS获取图文教程

              利用切片工具获取对应小图标在图片文件中位置
              利用切片工具获取对应小图标在图片文件中位置

              通过ps软件利用切片工具画出要显示图片区域后,双击即可弹出“切片详细卡”,可以得到X(靠左距离值),Y(靠上距离值)即可获得对应图片素材在大图中位置。

              五、在线样式与下载   -   TOP

              1、在线样式

              查看案例

              2、打包下载

              六、DIV CSS sprites技巧技术总结   -   TOP

              CSS sprites其实就是对CSS背景background样式的扩展应用,以前设置背景background-position常见为正数值,设置背景靠左靠上距离多少像素开始显示图片,为负数值后,是将图片拖离左边上边多少像素开始显示图片,下载本案例多次修改修改数值,观察观察能找到规律很快就会作为此技巧,同时学会PS切片工具获取距离值。

              如需转载,请注明文章出处和来源网址:http://www.tommstudio.com/rumen/r767.shtml

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

               

              如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
              DIVCSS5学习网文章修订日期:2013-01-22 14:52 原创:DIVCSS5学习网
              本文www.tommstudio.com DIVCSS5版权所有。