CSS精灵图及字体图标

最新推荐文章于 2023-07-09 18:23:54 发布
VIP文章 最新推荐文章于 2023-07-09 18:23:54 发布
阅读量197 收藏
点赞数
分类专栏： HTML+CSS 文章标签： html vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58361149/article/details/121437302
版权

一、精灵图（重点）

1.1为什么需要精灵图

4k8zWV.png

网页中往往会有很多的小背景图像作为修饰，当频繁向服务器发送请求时，服务器压力过大，降低加载速度。

使用精灵图的目的：减少服务器的请求次数，提高加载速度

例子

4kJmAs.png

1.2精灵图的使用

1.主要针对于小的背景图片

2.借助于背景位置来实现----background-position

3.一般都是负值。

1.3精灵图的缺点

1.文件相对于来说还是较大

2.图片本身放大和缩小会失真

3.制作完成后想要更换非常复杂

案例

最低0.47元/天 解锁文章
不会UI的前端攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css精灵图片
10-31
css精灵图片配图
CSS精灵图/雪碧图
m0_47195133的博客
12-19 257
CSS一文便知精灵图/雪碧图及其使用
CSS 精灵图
Lyajpunov的博客
12-07 273
精灵图（雪碧图） 将导航图片，按钮背景等有规律的图片整合成一张整图，然后用background-position来实现背景图片的定位的作用 减少对于服务器的请求次数从而提高加载速度 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
CSS精灵图,字体图标,三角型制作,css布局
最新发布
qq_45994446的博客
07-09 165
有效减少服务器接收和发送请求的次数,提高页面加载速度;某个位置要用某个图的时候，先把这个大的图（小图的集合）调用过来，通过挪动位置（x，y轴）来定位到里面的小图(1)精灵技术主要针对背景图使用,就是把多个小背景图整合到一张大图片中(2)这个大图片称为sprites精灵图或者雪碧图(3)移动背景图片位置,使用background-position(4)移动的距离就是目标图片的x和y坐标,x越往右越大,y越往下越大;(5)一般情况是往上往左移动,所以数值是负值;
精灵图+字体图标+CSS三角
weixin_42501248的博客
08-28 306
精灵图+字体图标+CSS三角
CSS实现精灵图与字体图标
09-24
主要介绍了CSS实现精灵图与字体图标的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
css基础学习笔记之字体图标
01-08
一、字体图标的运用克服了精灵图的缺点： 1.图片文件还是比较大的 2.像素图片放大或缩小会失真 3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三...
html+css淘宝网站仿写.zip
05-08
个人仿写的淘宝网站首页，资源包含完整html+css代码和图片字体等资源，适合新手查看和仿写练习，涉及如何引用icon图标，relative和absolute定位以及精灵图等知识点，由于是自己仿写的，可能不够完美，所以有问题请...
移动端项目，仿携程移动端（flex布局）.rar
11-07
此项目开发采用的技术：html5、css3、flex布局、二倍精灵图 采用的字体图标是阿里icon 项目只首页，适应各种移动端尺寸
css精灵图（雪碧图）
weixin_69761220的博客
05-17 311
图片整合技术（css-sprite）（雪碧图） ——将多张图片整合为一张图片，浏览器只需要加载一次，就可以同时应用多个图片 ——多个图片整合一张，也减小图片的总大小，提高请求的速度，用户体验也变好了 雪碧图的使用步骤 1:先确定好使用的图标 2:测量图标的大小 3:根据测量的结果，创建一个元素 4:将雪碧图设置为元素的背景 5:设置一个偏移量以显示正确的图片 拿下面图片进行演示： <!DOCTYPE html> <html lang="en"&gt..
css Sprites精灵图制作
09-07
css Sprites精灵图制作。加快网页加载速度 浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染 后期维护简单 该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用 使用教程链接http://blog.csdn.net/Makenzie/article/details/77881957
CSS精灵图和字体图标及下载
weixin_45077672的博客
04-08 1226
精灵图和字体图标精灵图1.1为什么需要精灵图？1.2精灵图的使用1.3精灵图总结字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的下载2.4字体图标的引入 精灵图 1.1为什么需要精灵图？ 浏览器：发送请求给服务器，服务器：接收请求，返回请求页面。 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。 因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也
css精灵图
mtb的博客
03-27 615
精灵图从淘宝下载含有多张小图标的大图，使用时使用background-image及背景图片位置属性显示图片的一小部分。使用adobe fireworks查看图片中小图标在图片中的位置（左上角为0,0），如下图，其中一个图标的位置（左上角）为0,44宽为24，高为24,。 &lt;title&gt;精灵图&lt;/title&gt; &lt;style&gt; .box{ ...
纯css画的宝可梦小精灵
ICode联盟
09-23 104
纯css画的宝可梦小精灵代码，眼睛一闪一闪的。
CSS精灵图和字体图标的使用
Bulut0907
11-07 481
浏览器客户端进行请求，加载第一个字体图标的时候，服务端就会将fonts文件夹下的4个不同格式文件，发送客户端，后面的字体图标就不需要再进行请求了。默认是选择模式，点击需要的图标进行选择，下面会进行选择的个数统计。如果以前的字体图标不够用了，需要添加新的字体图标，可以点击Import Icons将selection.json文件进行上传，里面记录了我们之前下载的字体图标信息。竖向是Y轴，向下是正，向上是负。打开属性显示框，选择矩形选框工具，对目标小图片进行框选，在属性显示框就可以看到目标小图片的位置和大小。
CSS精灵图(Sprite)笔记
Z_CH8648的博客
11-27 796
网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵 塞；精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度。
CSS-11.css精灵图
别忘了缩进的博客
01-29 1121
当网页中有很多图片事，浏览器访问网页，就会发送很多请求报文，这就会降低访问体验，这时我们将很多小图片都放在一张图片上，此时浏览器会少发送很多次请求报文，让我们的使用体验会好很多 这就是精灵图。 如何使用： 使用adobe公司的fireworks来确定你需要选的图片位置过程如下 演示代码： CSS精灵图练习 div{ display: inl
CSS精灵图（sprite）
热门推荐
wangwenkai76的博客
09-09 6万+
   说到精灵图（雪碧图），大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图（雪碧图）的一些知识后，就来和大家讨论一下，我个人对精灵图（雪碧图）的一些理解和实现方法吧。 1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。 2、精灵图技术的本质...
css精灵图坐标如何确定
06-09
1. 把所有需要合成的小图标拼在一起，形成一张大图，这个大图就是CSS精灵图。 2. 确定每个小图标在大图中的位置，也就是坐标值。可以使用Photoshop等图像处理软件来确定每个小图标的坐标值。 3. 在CSS中，通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值