手把手,永哥教你学会css sprite(雪碧图)技术

css sprite又称雪碧图或css精灵。

雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。

css sprite优点:

  • 有效减少网站的http请求数量,加速图片的显示。
  • 合并多张小图片成大图,能减少字节总数(大图大小<=多张小图大小).

什么时候使用css sprite?

  • 网站使用很多小图片,且容量比较小的(2~3k)。
  • 图片加载量比较大,且为静态图片。

注意:大图片不建议用雪碧图咯,太大的图片不利于合并,且定位麻烦,一次的加载时间长,导致全部图片出现时间延迟,效果不友好,得不偿失!

css sprite原理:

将许多的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位某个图片位置,来达到在大图片中引用某个部位的小图片的效果。

简单来说,就是利用background-position属性属性,设置背景图需要显示的起始位置,再通过标签来控制背景图显示的范围。

先来了解一下background-position属性吧,

手把手,永哥教你学会css sprite(雪碧图)技术

如上图,background-position的取值就是背景图显示的起始坐标

以左上角为(0,0)坐标

形式是background-position:0, 0;    0px 0px 也可以写成left top。

手把手,永哥教你学会css sprite(雪碧图)技术

上图中背景图部分在容器左上,定点坐标为负值

css sprite拼图:将许多的小图片整合到一张大图片中

可以用ps,或者网上很多在线雪碧图生成工具 http://alloyteam.github.io/gopng/ ,可以利用这些去生成雪碧图。

其实最好的拼图就是每个图标边距是多少和图标周围的留白留多少都控制好,这样background-position的坐标写起来才有规律。

css sprite(雪碧图)实例一

手把手,永哥教你学会css sprite(雪碧图)技术

html代码:

<ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
</ul>

CSS代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}

效果图:
手把手,永哥教你学会css sprite(雪碧图)技术

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1334.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月19日 上午9:34
下一篇 2018年2月20日 下午12:36

99%的人还看了以下文章

  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    3.8K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    2.4K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    7.2K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    2.2K0
  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    2.3K0
  • css中id和class的优先级问题,与顺序无关

    id,class,style的优先级别顺序为style高于id高于class。

    2020年11月15日
    4.2K0

发表回复

登录后才能评论