zoukankan      html  css  js  c++  java
  • css中雪碧图(sprite)的使用及制作方法

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位。

    1.先看一下雪碧图

    没有使用雪碧图时图标是这样一个个的单独文件:

    合成雪碧图后是这样拼在一起的一张图:

     2.雪碧图的使用

    首先确定要使用的图标的位置和大小(可以通过ps测量),

    如下的雪碧图大小统一,排列规则

    它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次...

    样式可以这样写:

     1 .box1 li:nth-child(1) {
     2    30px;
     3   height: 30px;
     4   background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/
     5 }
     6 
     7 .box1 li:nth-child(2) {
     8    30px;
     9   height: 30px;
    10   background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/
    11 }
    12 
    13 .box1 li:nth-child(3) {
    14    30px;
    15   height: 30px;
    16   background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/
    17 }

     排列不规则的雪碧图测量计算就不太方便了,推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite

     3.合成雪碧图

    如果没有美工MM给我们做图,自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。

    使用较为简单,选择图片后,可以竖排或横排,也能手动调整位置;设置css中路径名及保存名称,生成雪碧图即可,可以同时生成对应的css代码。

    转载请注明来源: 007办公资源网站 https://www.wode007.com

  • 相关阅读:
    [LeetCode] 75. 颜色分类(荷兰国旗)
    [LeetCode] 347. 前K个高频元素
    CMU-14445 数据库原理 汇总
    MIT-6.824 操作系统 汇总
    发布一个基于协程和事件循环的c++网络库
    记录一次gdb debug经历
    彻底弄懂UTF-8、Unicode、宽字符、locale
    CPU使用率原理及计算方式
    TCP使用注意事项总结
    STL-vector
  • 原文地址:https://www.cnblogs.com/ypppt/p/12868403.html
Copyright © 2011-2022 走看看