css sprite雪碧图制作,使用以及相关,图文gif。

简介: 在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。实现原理:CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.

写在前面:


在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。

微信截图_20220621152629.png

实现原理:


CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非img标签。


1.前期准备下载工具:css sprit(css精灵)


长这样:image.png

css sprit


看图片就知道多好用!


文件不到200k,相当轻便,这是百度云链接:pan.baidu.com/s/1nuOZDqT


也有mac版本的,这是链接:dl.pconline.com.cn/download/42…


2.使用方法


下载,打开之后。

1.首先要切一些图片,不会切的话,移步:《前端ps切图方法,图文详细》


2.打开雪碧图,选择图片。

image.png

3.添加完图片之后,会自动生成代码,需要排列一下图片:

image.pngimage.png可以看到我排列图片的时候,下面的代码也会跟着刷新


注意:排列图片的时候要注意各个图片之间留点空隙,不然使用的时候,会相互覆盖。


3.保存图片以及雪碧图css代码


保存雪碧图image.png

生成的雪碧图:

image.png

保存雪碧图-css代码(因为软件没有到导出css代码的功能,所以要自己新建一个txt文件,放在雪碧图旁边,以后打开txt就知道图片在雪碧图的位置。)

image.png


4.如何在html中使用?


慕课网雪碧图:

image.png

慕课网demo:www.imooc.com/code/1511。

慕课网雪碧图教程:www.imooc.com/learn/93


5.雪碧图优劣势


1.加快网页加载速度


网页上面每一张图片,都要向浏览器请求下载图片,而浏览器接受的同时请求数是10个,一次能处理的请求数目是两个。

http发起请求,最耗时的是在三次握手,每次请求之前都要握手。所以在网页性能优化中,减少http请求的次数是相当重要的一点!(本来想写多一点,但有些知识点不太清楚,怕误人子弟就不再赘述了。)

当一个网页有几百张,几千张图片的时候加载起来简直了!而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染


2.后期维护简单


该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码,简单易用


3、CSS Sprites能减少图片的字节


曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。


4、解决了网页设计师在图片命名上的困扰


只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。


5、更换风格方便


只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。


关于雪碧图的缺点内容:不要滥用雪碧图sprite


里面说了蛮多的,这事情可以根据使用场景来决定,大家可以看看,毕竟我是来教雪碧图的。。。


下面有关于雪碧图的demo。


之前写过两篇相关的:

1.前端ps切图方法,图文详细

2.ps切图实用小技巧、图片格式的区别及相关内容


以上。


目录
相关文章
|
4月前
|
编解码 缓存 前端开发
什么是CSS Sprite
【7月更文挑战第14天】 **CSS Sprite** 是一种图像合并技术,通过将多个图标整合到一张大图并利用CSS背景定位显示所需部分,减少HTTP请求,提升页面加载速度和降低服务器压力。优点包括减少请求次数、降低服务器负担、加快速度和简化图片管理,但制作与维护成本高且定位复杂。使用工具可降低工作难度,适应不同分辨率设备。需权衡利弊适时应用。
45 1
|
6月前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
80 1
|
6月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
64 1
|
11月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
76 0
CSS Sprite 优点
|
前端开发
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
242 0
实训-利用HTML+CSS制作某米官网首页(二)
|
前端开发
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
321 0
实训-利用HTML+CSS制作某米官网首页(一)
|
存储 移动开发 前端开发
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
130 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
|
人工智能 JavaScript 前端开发
使用 HTML、CSS 和 JS 制作一个中国象棋
这是一个简单的 JavaScript 项目,中国象棋人机对战,文末有完整源码免费下载地址,祝大家玩得开心,学得轻松。
381 2
使用 HTML、CSS 和 JS 制作一个中国象棋
|
前端开发 JavaScript 程序员
基于CSS的3D旋转画册的制作
这是一种使用CSS做出来的旋转效果,可用于宣传海报
基于CSS的3D旋转画册的制作