手把手,永哥教你学会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%的人还看了以下文章

  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    2.2K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    3.9K0
  • CSS的浮动及清除浮动的5种方法

    css属性float:left/right/none 左浮动/右浮动/不浮动(默认),文章介绍了清除浮动的5种方法,并指出其实现原理、优缺点和使用建议。

    2019年11月5日
    3.5K0
  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    3.5K0
  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    4.1K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    7.4K1

发表回复

登录后才能评论