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

  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    3.8K0
  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    7.2K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    3.7K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    3.6K0
  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    5.0K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    3.1K0

发表回复

登录后才能评论