CssSprite雪碧图工具的使用与应用

迈不过友情╰ 2022-10-14 01:00 161阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
使用的是 CssSprite 生成雪碧图的工具。  
点击输出后会生成相应的图片和选择输出的 css 文件，我们直接拿到 vue 项目中，然后在相关文件中使用  
这是生成出来的 less 文件内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]

**在页面中使用**  
先引入 less 文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 2]  
然后应用

<i class="icon-yonghuming"></i>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221014/ce6b5b99add3469997188d44a234cf43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: /images/20221014/1ea679dfe58643369a373bb37053fa0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 2]: /images/20221014/7df52ff56aa34ebfb66b6ef3b0a837b5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关雪碧图抖动问题

问题记录 h5开发时出现雪碧图抖动问题解决方法 1.px+transform:scale（0.5）+媒体查询 2.使用svg

不念不忘少年蓝@/ 2022年12月11日 05:19/ 0 赞/ 201 阅读

相关 CssSprite雪碧图工具的使用与应用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年10月14日 01:00/ 0 赞/ 162 阅读

相关 CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“backgrou

向右看齐/ 2022年07月28日 11:58/ 0 赞/ 228 阅读

相关雪碧图制作-Compass安装

雪碧图制作可以有其他工具，自己试了试Compass。如果要安装Compass，需要先安装Ruby环境。下载Ruby：下载链接：[http://ruby

缺乏、安全感/ 2022年07月28日 01:03/ 0 赞/ 198 阅读

相关雪碧图-初识

在写前端时，听到雪碧图这个概念。因此在网上查了查资料，了解了一番。什么是雪碧图？ CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并

刺骨的言语ヽ痛彻心扉/ 2022年07月28日 01:02/ 0 赞/ 200 阅读

相关 css精灵图(雪碧图)切图

css精灵图为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图雪碧图切图简单过程：先在ps中打开，然后通过用矩形覆盖原来图标在图片中的位

深碍√TFBOYSˉ_/ 2022年05月20日 09:56/ 0 赞/ 493 阅读

相关关于雪碧图

前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。 ▍含义也叫CSS sprite

ゞ浴缸里的玫瑰/ 2022年05月15日 04:24/ 0 赞/ 206 阅读

相关 Web优化之雪碧图

最近访问凡客诚品产品页留意了一下，[这个页面的一些图动态做成了雪碧图][Link 1]，如： ![1341658533_7881.PNG][] 从这张图片我们可以看到.Sp

- 日理万妓/ 2022年01月15日 09:13/ 0 赞/ 272 阅读

相关 CSS 雪碧图及其优缺点

CSS Sprites简介：国内叫雪碧图或者雪碧精灵。它允许将网页中多个零星小图都包含到一张大图中去，减少每个图的 HTTP 请求来提高图片加载效率，通过 background

墨蓝/ 2021年12月18日 19:23/ 0 赞/ 333 阅读

相关 css sprite 雪碧图

特点： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大一些大图不建议拼接成雪碧图有效的减少http请求，加速内容的显示我

拼搏现实的明天。/ 2021年09月16日 10:04/ 0 赞/ 304 阅读