gulp雪碧图缩放

最新推荐文章于 2022-11-20 16:06:36 发布

原创最新推荐文章于 2022-11-20 16:06:36 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp #前端 #node.js

需求：gulp合成的雪碧图，多处使用的尺寸不同，所以需要实现雪碧图缩放功能
gulp脚本生产的雪碧图样式：

前提限制条件：要求合成的雪碧图的子图尺寸必须一样

实现：编写PY脚本获取改造前 css 的background-position的X、Y值和上下左右边界和用户输入的横排、竖排照片个数计算得到新的background-position、background-size的百分比：

优点：打破了传统雪碧图不能缩放的弊端，大大减少了网络请求数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

你的谎言

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

雪碧图的原理，使用

在全栈和前端徘徊的程序员

05-02

1293

图标数量较多且变化较少；需要兼容老浏览器（如 IE8）；首屏性能敏感，需要减少请求数；图标为位图（非矢量），如 PNG、JPG。图标频繁更新；需要动态改变颜色或大小；使用现代框架（Vue/React）+ SVG 技术栈；移动端优先项目，推荐使用 SVG 或 IconFont。

lesson52：CSS进阶指南：雪碧图与边框技术的创新应用

最新发布

2402_82363599的博客

09-02

910

本文深入解析2025年CSS雪碧图与边框系统的核心技术及应用。雪碧图通过合并图标减少HTTP请求，结合自动化工具提升开发效率，支持响应式设计和多状态交互。现代边框系统新增椭圆半径、多层阴影等特性，实现渐变、动画等视觉效果。文章详细介绍了性能优化策略，包括雪碧图排列算法、边框渲染优化，并提供了社交按钮等实战案例。随着AI辅助优化和CSS Houdini等技术的发展，这些技术将持续推动网页性能与视觉体验的边界。

参与评论您还未登录，请先登录后发表或查看评论

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

weixin_33923762的博客

08-20

347

花了一个礼拜完成了慕课网定制的七夕主题效果，其中有一个没实现好的功能，就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理原图如下：人物是采用的是雪碧图，通过坐标绝对数据取值问题很明显，在缩放的屏幕上人物还是按照原尺寸大小显示后来临时留了一节预备的方案：CSS3的scale处理直接可以让元素缩放通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放，目测还是...

雪碧图背景自适应，大小随便缩放（用百分比实现）

10-15

7174

1.使用场景（项目得做移动端的适配）项目中要用到表示日期的图片共31张如现在想通过雪碧图来减少http请求，提升网站的性能。 2.思路：用了个插件gulp-css-spriter(能够合并css上的图片，并且自动重写css的background) 得到以下图片和一堆css，如下： .date-22 { background: url("../../imag

css雪碧图如何调整大小

hzxOnlineOk的博客

01-26

8377

1、通过transform: scale(0.5);来缩放，但在本身有过渡或动画时，刷新页面会有卡顿拉伸现象！不建议这样做！ 2、直接调整雪碧图background-size大小例如，雪碧图规格140*840，但是我们只需要width:42px、height:20px（只是容器的宽度，不是直接设置雪碧图的宽高哦！相当于我们人在房子里，只能看到窗户开放给我们的景象，其他的是看不到的，在这里具体...

h5在使用雪碧图做背景时，如何使图标等比例缩放大小？

qq_30432311的博客

07-04

6513

h5页面在使用雪碧图做背景时，其主要利用background-size属性。首先，h5页面的头部要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />这段代码可以让网页的宽度自动适...

用gulp生成雪碧图

qq_36934775的博客

11-13

712

参考俩：https://www.cnblogs.com/qianlitiaotiao/p/5054231.html CSS雪碧即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图的有点： 1.将多张图片合并到一张图片中，可以减小图片的总大小 2.将多巡航图片合并到一张图片后...

基于Gulp与Webpack的前端构建样板，支持SVG雪碧图与SCSS

该样板基于Gulp + Webpack的技术栈组合，支持SVG精灵图（SVG Sprite）生成和SCSS预处理器编译，具备完整的开发环境与生产环境构建能力。这种技术选型体现了对现代前端工程化趋势的深刻理解：Webpack负责模块打包、...

yamaxun雪碧图

03-11

结合CSS媒体查询或`background-size`属性，确保雪碧图在不同设备上缩放适配。例如： ```css @media (max-width: 768px) { .icon-search { background-size: 200px 200px; } } ``` ### 相关资源 1. **开源...

grunt-sprite：基于Grunt的CSS雪碧图生成插件

ImageMagick 是一个跨平台的命令行图像处理套件，具备高度可编程性与稳定性，能够精确控制图像的缩放、裁剪、对齐与布局方式。在 Ubuntu 和 macOS 系统中，安装 grunt-image-sprite 时会自动触发脚本去检测并安装 ...

css雪碧图使用

forgiveForever的博客

11-20

462

雪碧图，放大缩小

css雪碧图+移入变化图片

qq_42975998的博客

03-17

953

雪碧图也叫精灵图，就是把一个个小图标合并在一张图上，通过background-position定位来显示相对应的图片。所有小图标集中在一个图片上，这样就可以减少http请求，提高页面访问速度。代码如下: .sprite{ width: 130px; height: 140px; background: url('./sprite.jpg'); backgro...

gulp图片压缩

tusi

01-18

1049

gulp图片压缩网页性能优化，通常要处理图片，尤其图片量大的时候，更需要工具来批量处理，这里使用gulp，做个简单总结 image-resize压缩尺寸 var gulp = require('gulp'); var imageResize = require('gulp-image-resize'); gulp.task('resize', function() { return g...

（36）Gulp 构建资源（图片）文件

Java田根旺

01-14

788

一、Gulp 构建资源（图片）文件概述所谓Gulp 构建资源（图片）文件就是将图片占用大小压缩后变小。其实我们Gulp构建资源文件不只是单独只图片，还有其他的比如说字体文件，也是资源文件。这里我们拿图片文件演示。一、Gulp 图片文件所需插件二、Gulp 构建资源（图片）文件示例 1.安装压缩图片文件所需要的插件安装命令（npm i gulp-imagemin -D）当我们执行安装命令呢，发现有一个报错。原因是我们下载该插件是要去国外的网站去下载，所以会出现该问题。那么如何解

gulp教程之gulp-imagemin压缩图片

小圣贤君的博客

11-18

1万+

简介：使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片），很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！ 1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件本示例目录结构如下： 2、本地安

Css 精灵图（雪碧图）图片大小显示

qinyuhua93的博客

11-20

5606

Web 项目使用的JQuery框架，项目时间比较久了，图片积累下来，大概光图片就有一两百个，为了减少网络请求数量和加载时间，项目做一个统一的规整，将小图标全部放在精灵图（雪碧图）上。

rem布局缩放雪碧图（精灵图）

爱睡的虫虫

05-11

2257

sprite图片的处理为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。比如有如下一张200*50的sprite图。 image 所以在处理sprite图片时，我们只能给background-s...

移动端适配之雪碧图(sprite)背景图片定位