ps精灵图或者说是雪碧图?

最新推荐文章于 2022-08-31 16:25:12 发布
最新推荐文章于 2022-08-31 16:25:12 发布
阅读量194 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c19cbd96fb9a049b347ecea
本文讲解了精灵图（雪碧图）的概念与作用，详细解释了如何通过改变background-position属性来实现图片的合并，以此减少HTTP请求，优化网页加载速度。主要应用于前端开发中的小图优化。

精灵图或者说是雪碧图

  • 在做项目的时候,有时候咱们为了优化,减少http请求,会把多张图片合并到一张图片上面,这种图就是"精灵图或者是雪碧图"
  • 只针对小图

精灵图的原理:

  • 通过改变background-position,再记住一点,在写精灵图的时候,background-position的x轴,y轴都是负的
ps精灵图
weixin_45832989的博客
03-28 469
ps精灵图 1PS是用来处理位图的，而AI是用来处理矢量图的。 2.位图和矢量图 ​ 位图是由像素点组成的，文件较大，放大会失真，一般用来表示人物、风景等；矢量图是由线条组成的，文件较小，放大后不会失真，一般用来表示工程图等，是由若干个几何图形拼合而成。 3.分辨率 ​ 又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。 ​ 图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰，但这个图像文件也越大。 4.位分辨率 ​ 又叫色彩深度或位深度，批一个像素中，每个颜色分
CSS Sprite雪碧图详解
得意小门生的博客
08-19 645
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 雪碧图的使用场景 静态图片，不随用户信息的变化而变化。 小图片，容量比较小（2~3k）。 图片加载量比较大。 目的 减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。 使用 使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。 ![![在这里插入图片描述](ht.
雪碧图生成器
05-07
绿色免安装版本，雪碧图生成器，方便快捷比ps好用绿色免安装版本，雪碧图生成器，方便快捷比ps好用
photoshop 雪碧图制作
weixin_34178244的博客
10-27 194
图片拖入后 一般取同行同列最高最宽     自动在所选目录生成 打开: 修改     四次请求有点多啊. 打开 （下载）css sprite 自动生成坐标地址. 不过我们要把它排远一点     OK了。   我们生成以后: 坐标地址就可以直接用了，不用一个像素的移了 因为生成时，也会产生文件，所以我们还是选择...
Photoshop制作雪碧图技巧
weixin_30260399的博客
07-06 185
雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方。 雪碧图可以减少网页加载时的http请求数，优化网页性能。 步骤： 　　a、使用Photoshop新建一张背景透明的图片。 　　b、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够的话，可以用画布大小调整大小。 　　c、按照所有小图片的范围裁剪图片，存为透明背景的png图...
photoshop 制作雪碧图
DevOps海洋的渔夫@专栏
02-18 766
仅供学习，转载请注明出处 需求说明 在上一篇photoshop 切图技巧中，我使用批量切图的技巧切出了三张图片如下： 那么可以将这三个图片做成一张雪碧图，方便一次性请求获取下来。 下面来演示一下制作过程。 创建透明画布 好了，有了透明背景之后，就可以打开那三个图片，抠出图像部分，复制+黏贴到透明背景中。 打开图像 ...
移动端Rem布局--雪碧图css sprite
hahahhahahahha123456的博客
11-29 915
为什么使用雪碧图 [摘要] CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，今天为大家分享一个一键生成css雪碧图片的工具，复杂的事情简单化，提高开发效率。 CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染...
自学前端第十五天:伪类伪元素和属性选择器和精灵图
weixin_47592060的博客
05-04 764
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。 3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!) 4.伪类语法结构: ① 类选择器是一个点 比如 .demo {} ②而我们的伪类 用冒号 比如 类 :link{} a { /* a
html中css精灵
最新发布
04-03
可能还需要提到雪碧图的制作工具，比如使用在线工具或者PS手动拼接，但具体工具可能不需要展开，保持简洁。 另外，示例代码部分很重要，用户可能需要直接复制代码进行尝试。根据引用2中的代码，使用img标签可能不是...
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
前端工程师技能之photoshop巧用系列第五篇——雪碧图
weixin_33929309的博客
09-09 140
前面的话 　　前面已经介绍过，描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图   定义 　　css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点： 　　　　【1】减少http请求次数 　　　　【2】减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的...
【前端学习笔记day35】4.5. Photoshop制作雪碧图技巧
汪雯琦的博客
01-30 582
文章目录4.5. Photoshop制作雪碧图技巧Photoshop制作雪碧图技巧 4.5. Photoshop制作雪碧图技巧 Photoshop制作雪碧图技巧 雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。 步骤： 1、使用Photoshop新建一张背景透明的图片 2、将小图片...
精灵图（雪碧图）介绍及使用~
东北玛丽的优快云
02-20 2355
目的： 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度 本质： CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来 精灵图的使用： CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵...
精灵图（雪碧图）
weixin_47212352的博客
10-14 146
精灵图主要针对小的背景图片使用 主要借助于背景位置来实现 一般情况下精灵图都是负值 使用方法： 在ps中利用切片工具确定图片位置和大小，设置一个和需要的小背景图片大小相同的图片，然后设置背景图片，背景位置信息。这里需要注意图片位置通常为负值。 .box{ width:60px; height:60px; background:url(images/img.png); background-position:-18px 0; //这里-18px的意思是图片向左移动18px } ...
15.精灵图
potato123232的博客
03-09 2223
像这种给小图标攒成一张图的图像，就叫精灵图 使用精灵图的目的是降低请求次数，比起每个小图标都要请求一次，我们直接给一个大的图像，在显示若干个小图标的时候，只需要请求一次 精灵图主要用于小的且不经常换的图像(因为整一张精灵图费劲)，像这种要经常换的图像，最好不要使用精灵图技术 精灵图被称作 CSS sprite，它的工作原理实际上是改动background-position，我们做个例子，我们现在有这样一张精灵图 一般从美工手里拿到的都是透明背景的，我这是白的，我就简单用一下 我现在搞两个
快速制作雪碧图
子非鱼
01-30 1万+
分享一个快速生成雪碧图并生成对应css代码的网站 https://www.toptal.com/developers/css/sprite-generator 左边上传图片，右边生成雪碧图，并且可以选择图片的排列形式。
雪碧图和PS的应用
weixin_44790641的博客
02-10 1515
一、定义： CSS Sprite也叫CSS精灵，CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。 二、优点： （1）减少图片的字节。 （2）减少网页的http请求，从而大大的提高页面的性能。 （3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就
运用ps查看雪碧图（精灵图）的准确位置的方法
weixin_51746203的博客
08-31 2603
运用ps测量精灵图的准确位置
一键式PS缩略图查看工具安装指南
总的来说，PS缩略图补丁是一款专门针对Photoshop用户优化缩略图预览的工具，能够显著提高图片预览的质量和编辑效率。通过一键式安装和高质量缩略图的生成，用户可以快速浏览和选择需要编辑的图片，从而提升整个工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值