精灵图与字体图标的使用

最新推荐文章于 2023-06-30 21:26:33 发布
最新推荐文章于 2023-06-30 21:26:33 发布
阅读量884 收藏
点赞数 1
分类专栏： HTML和CSS基础学习 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52992057/article/details/123774819
版权

文章目录

一、精灵图

1.1 为什么需要精灵图？

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送
请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称
CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

1.2 精灵图（sprites）的使用

使用精灵图核心：

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
  3. 移动背景图片位置以控制显示区域， 此时可以使用 background-position
  4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
  5. 因为一般情况下都是将精灵图往上往左移动，所以两个坐标数值基本是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

使用精灵图核心总结：

  1. 精灵图主要针对于小的背景图片使用
  2. 主要借助于背景位置来实现 background-position
  3. 一般情况下精灵图都是负值（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理）

在这里插入图片描述

【王者荣耀案例】

【案例：拼单词】

1.3PS切片工具的使用

在这里插入图片描述
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图的使用</title>
<style>
.box1{
   
    width: 238px;
    height: 129px;
    background: url(/images/sprites.png)  no-repeat   0px -219px;
}
</style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

效果如下：
在这里插入图片描述
【案例：拼单词】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE&
最低0.47元/天 解锁文章
Fighting lcy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
aaatool的博客
06-07 139
CSS精灵技术：能有效地减少服务器接收和发送请求的次数，提高页面的加载速度。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。（主要针对小的背景图片，因为其他图片可能经常更换）通过background-position移动位置，使用需要的图片。（与常规坐标不同，坐标正方向为x往右，y往下，所以精灵图的使用一般为负值）需要精确的测量，因为需要精确的移动坐标。 字体图标 主要用于显示网页中通用、常用的一些小图标，是对于工作中图标部分技术的提升和优化。看起来是图标，本质是
CSS实现精灵图与字体图标
09-24
主要介绍了CSS实现精灵图与字体图标的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
0910笔记--精灵图\字体图标
WangJiaYi948的博客
09-10 373
1.定位 定位的作用: 实现盒子的叠加 + 不规则布局 定位的知识点: 子绝父相 2.鼠标小手 cursor:pointer; 3.取消轮廓线 outline:none; outline:0; 4.取消文本域缩放 resize:none; 5.垂直方向居中 ver...
svg精灵图
当幸福来敲门
05-29 587
一、svg精灵图 利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol。 1.使用svg精灵图 简单理解使用步骤可以分为三步 1.声明精灵图（类似于一个容器，他在页面中占位，所以用display：none隐藏）。 2.svg标签改成symbol，就变为了精灵图的一个元件，在元件上声明id属性。 3.根据id调用精灵图中的svg。 <!-- 1.声明精灵图 --> <svg style="display:none;">
HTML5开发 之 CSS精灵技术 和 字体图标技术
z_x_Qiang的博客
09-22 681
1.精灵技术 为了避免一写小的图片背景图片很多，然后多次请求服务器的情况下，采用了一张底色为透明的有很多小图标的大图，网页只要请求一次就可以了获取到大图，然后通过背景设置position控制坐标显示不同位置的小图可以实现；   2.文字图标 其实是将图标当成一种文字显示的，需要设置字体； 可以在网上找一些现成的图标 常用的网站：https://icomoon.io 阿里的字体库：ht...
如何使用精灵图
minimorezhd的博客
11-21 771
刚刚带大家学习了一下二级菜单的写法，这次我们来聊聊精灵图的使用，因为我想大家在仿写其他页面的时候总会遇到各种各样的小图标，很多小图标都能找到，这里推荐大家去搜 -阿里矢量图-这是阿里的矢量图库，里面的矢量图基本能满足大部分人的需求，但是一些奇奇怪怪的小图标确实是找不到，这个时候推荐大家使用精灵图，精灵图的对于很多大项目来说是很友好的，为什么呢，因为精灵图只需要访问一次，不需要占用服务器端太多的内存。 因为精灵图一般位于导航栏里面，所以我们还是要先见一个框出来，也是差不多1200px, 浏览器效果如下 然后
css基础学习笔记之字体图标
01-08
一、字体图标的运用克服了精灵图的缺点： 1.图片文件还是比较大的 2.像素图片放大或缩小会失真 3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三...
payment-icons::credit_card:付款与电子商务相关的SVG图标包
04-27
使用这些图标的最简单方法是从github进行npm install并使用您最喜欢的工具链来构建字体或精灵，例如 yarn add payment-icons 或者 npm install payment-icons 如何在React中使用？ 您需要像处理其他图像资产一样...
关于什么时候用精灵图什么时候用字体图标
m0_67742636的博客
06-17 194
关于什么时候用精灵图，什么时候用字体图标
spritemaker:创建一个svg精灵图片，并为您提供css代码
05-24
SVG SpriteMaker 创建一个svg精灵图片，并为您提供css代码。 上载多个SVG图片并下载您的Sprite和CSS。
vite-plugin-svg-icons:Vite插件可快速创建SVG精灵
03-06
vite-plugin-svg-icons English | 用于生成svg精灵图。 特征 预加载项目运行时会生成所有图标，并且只需要操作一次dom。 高性能的内置缓存，只有在修改文件后才会重新生成。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
精灵图的使用
weixin_42378409的博客
12-24 146
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ background:url(images/abcd.jpg) no-repeat ; } ...
精灵图的使用方法（css）
weixin_52063946的博客
07-13 426
1、为什么要用精灵图 网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。 2、主要使用的是background-position属性 比方说，在如图所示的字母图片中，我们想要A字母 （1）、设置一个容器div，设置其高度和宽度 （2）、设置背景图片，并且不重复 （3）、设置背景图片的位置，x，y（左上角是0,0） <!DOCTYPE ...
css进阶：精灵图的使用、实现用精灵图拼出名字
weixin_49555741的博客
03-23 2717
1.精灵图的用途 为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧） 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了 2. 精灵图（sprites）的使用 2.1 原理 使用精灵图核心： 精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中 这个大图片也称sprites精灵图或者雪碧图 移动背景图位置，此时可以background-position 移动的
带有SVG精灵的图标系统
CSS 初学者指南
06-25 330
我一直是图标字体的拥护者。 许多站点确实需要图标系统，而图标字体则提供了一个很好的系统。 但是，我认为假设您对IE 9+很好 ，使用内联SVG和<use>元素引用图标是一个很好的系统。 首先让我们介绍一下它是如何工作的。 处理图标的一种不错的方法是将一个文件夹包含.svg文件。 这是使用SVG的很酷的事情之一-它们是源文件。 它们可以是彩色的，而不是彩色的，可以是...
Vue2+webpack项目中如何生成svg精灵图
最新发布
Jolly_zhang的博客
06-30 406
svg精灵图使用详解
CSS精灵图的原理与使用方法介绍【前端开发】
跳探戈的小龙虾的博客
03-16 2890
服务器收到请求后，从它的内部搜索对应的HTML文档，在这个例子中，它搜索的是网站的官网HTML页面，与此同时，如果该页面本身有图像，那么这些所有的图像会以一个一个的url的形式返回，而后在进一步加载中，每一个url可能再发起一次HTTP请求，如果此时使用的是非持续的HTTP连接，那么TCP带来的RTT时延是很可观的，因此为了减少时延，精灵图诞生了： 精灵图把网页中所需的所有的小图片，都集成在一张图上，通过修改图片的定位，达到一张图顶n张图的效果，加载时只需要加载一张图片即可！
CSS综合案例——用精灵图拼单词
weixin_45586870的博客
11-17 360
要学会用fireworkes软件，精确测量给的图片里每个图案的大小和位置。 例子拼 pink 这个单词，在盒子里放这个图片的特定图案字母P。那么需要设置好盒子，并设定好到底要显示这个精灵图的哪个部位（靠坐标定位）。以此类推设置每一个字母的盒子。 最终显示效果如图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
love2d 使用精灵图
06-01
在 Love2D 中使用精灵图可以通过创建一个包含所有动画帧的图像集，然后使用 Quad 对象从图像集中选择每个动画帧。以下是实现这个过程的基本步骤： 1. 创建图像集：将包含所有动画帧的图像放在同一个图像文件中，然后使用 love.graphics.newImage() 函数创建一个图像对象。 2. 定义 Quad 对象：使用 love.graphics.newQuad() 函数从图像集中选择每个动画帧。 3. 绘制精灵：使用 love.graphics.draw() 函数将 Quad 对象绘制到屏幕上。 下面是一个简单的例子，演示了如何在 Love2D 中使用精灵图： ```lua function love.load() -- 创建图像集 spriteSheet = love.graphics.newImage("spritesheet.png") -- 定义 Quad 对象 spriteQuads = {} spriteQuads[1] = love.graphics.newQuad(0, 0, 32, 32, spriteSheet:getDimensions()) spriteQuads[2] = love.graphics.newQuad(32, 0, 32, 32, spriteSheet:getDimensions()) spriteQuads[3] = love.graphics.newQuad(64, 0, 32, 32, spriteSheet:getDimensions()) -- 设置当前帧 currentFrame = 1 frameDuration = 0.2 timeSinceLastFrame = 0 end function love.update(dt) -- 更新当前帧 timeSinceLastFrame = timeSinceLastFrame + dt if timeSinceLastFrame >= frameDuration then currentFrame = currentFrame + 1 if currentFrame > #spriteQuads then currentFrame = 1 end timeSinceLastFrame = 0 end end function love.draw() -- 绘制精灵 love.graphics.draw(spriteSheet, spriteQuads[currentFrame], 100, 100) end ``` 上面的例子创建了一个图像集，并定义了三个 Quad 对象，每个 Quad 对象表示图像集中的一个动画帧。在 update() 函数中，每隔一段时间更新当前帧的索引，然后在 draw() 函数中绘制当前帧的 Quad 对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值