二倍精灵图的做法（以firework为例）

最新推荐文章于 2022-09-25 16:16:11 发布
最新推荐文章于 2022-09-25 16:16:11 发布
阅读量605 收藏 3
点赞数 3
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woai_mihoutao/article/details/122406781
版权

1.在firework里面把精灵图等比例缩放为原来的一半

点击如上图所示的小按钮，将宽后面的数字改为200（宽看为400，缩为原来的一半变为200）

2.根据大小测量坐标

用切片工具将其中一个小图像单独划分出来，再看左下角的坐标X 、Y 值。

3.代码如图所示

 

注意里面的backround-size也要写，精灵图宽改为原来的一半 

七个喵
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css里2倍精灵图的使用方法
weixin_39295546的博客
03-07 1679
在移动端开发时，精灵图是2倍大的，然后我们把精灵图缩小，再显示，这样更清晰。因为现在手机的分辨率很高，不进行缩放就会模糊。 首先打开ps，将精灵图导入，选择图像，图像大小。 然后点击百分比，将宽度设为50%（高度不用改，会自己改过来） 此时的图片就是缩小到了我们想要使用的大小，记住此时图片的宽度是21px 然后点击窗口-信息，就能看到坐标轴 选择你要的图片，然后就可以看到图片的宽和高，ic...
二倍精灵图操作方法
huomore的博客
04-02 1355
为什么要有精灵图？ 最早的时候网速十分有限，为了提升用户体验，我们会将一张大图分解成多张小图来提高页面打开速度，但是网速得到了提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张较小的图片放在一张大图上，从而减轻服务器的压力。而将多张小图放到一张大图上的操作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprite。 精灵图的操作方法 1、先了解...
二倍精灵图的做法
qqqcp3的博客
12-01 262
先将精灵图等比例缩放为原来一半 然后测量所需图的坐标 用bg：url n-r 坐标 然后bg-size要将缩放一半后大小写上去
2倍精灵图做法
weixin_42378409的博客
03-31 272
二倍精灵图做法
shy的博客
09-25 385
二倍精灵图做法
移动端学习篇-1、二倍精灵图做法
Code P的博客
08-02 314
1、在fireworks里面将等比例将精灵图缩放为原来的一半 2、根据大小测量坐标 3、在代码里面background-size也要写：原来精灵图所选图标宽度的一半
Firework Games White Paper
最新发布
12-24
【Firework Games】是一个创新性的区块链游戏平台，致力于成为最先进、最具前瞻性的游戏领域先驱。该平台基于纯粹的区块链技术，旨在构建一个开放、包容且多元化的游戏世界，从而革新现代社会的游戏产业。在Firework...
firework.zip
03-24
标题“firework.zip”指的是一个压缩文件，使用的是ZIP格式，这种格式广泛应用于数据压缩，便于文件的存储和传输。ZIP文件允许用户将多个文件或文件夹打包成一个单一的可下载单元，节省磁盘空间，并且可以进行密码...
firework云盘下载
09-19
画图工具，可用于前端开发时，对设计图进行衡量，计算，前端的辅助工具
Firework安装包-免费版本
09-29
这个是Firework的安装包，无需破解，免费使用不收费。
FWBuild：专为Firework构建的现代OS映像创建系统
02-05
FWBuild是一个专为Firework操作系统设计的现代OS映像创建系统。这个系统的主要目标是简化和加速构建过程，使得开发者可以更加高效地构建定制化的Firework操作系统映像。Firework可能是一个轻量级或者高性能的操作...
二倍图（精灵图的用法）
weixin_33913332的博客
06-20 1382
1.引入图片。在fireworks中限制宽高，然后把宽高设置成现在的一半 2，采用切片工具进行切片，获取精灵图的坐标 转载于:https://www.cnblogs.com/qdxbls/p/11057858.html...
二倍精灵图的使用
qq_44910948的博客
08-11 520
有些精灵图会设计成二倍图，二倍图在引入时需要缩小尺寸，即缩小到宽高的一半。我们可以使用 background-size 来设置宽高，宽高设置一个即可，因为宽高是等比例缩放的。 例如： 这张精灵图是 288*48px 的二倍图，只需缩放宽度一半或者高度的一半即可，然后利用 background-position 来更改坐标位置。 background: url(../img/channel-sprite.png) no-repeat 0 0; background-size: 144px; ...
二倍精灵图
JadeDu_的博客
08-17 2285
在ps中把sprite.png打开 不用缩放图片，光标定位到要扣的图片左上角 量出x y 值 在css中代码 箭头指的位置是上一步x y值的一半，前面加负号，看不见图片的话，就打开开发工具调试。
二倍图（物理像素&物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
shy的博客
05-06 1010
二倍图（物理像素&物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
前端学习笔记：meta视口标签及二倍精灵图用法
weixin_43339892的博客
01-31 830
一、meta视口标签 <title>meta视口标签</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scalable=no"> width=device-width,视图宽度和设备保持一致 initial-scale=1.0, 视口的默认缩放比例1.0 max
二倍图整合雪碧图
aydongzhiping的博客
05-07 1303
在优化项目ui过程中遇到的问题，ui切图为2倍图，做背景图整合时候使用定位和CSS3的scale来实现，具体按实际情况调整。结果肉眼看出来是没什么差别的
CSS关于二倍图的使用
热门推荐
xiaozhuo_tang的博客
02-09 1万+
实际工作中可能会得到二倍图，但我们需要的是一倍图的尺寸显示在网页，有N张图的情况下我们不可能去调节每一张图故可以通过transform:scale进行缩放 transform-origin:left top; transform:scale(0.5); 但此时原本的盒子大小不会变化，会留下一大片空白 这个时候我们可以使用zoom，zoom会改变到盒子的大小，不过可能会有性能问题，这个时候...
Firework Games白皮书：重塑区块链游戏未来
Firework Games White Paper V3.0 ... Firework Games以区块链技术为核心，致力于构建一个开放、公平、创新的游戏世界，通过去中心化的机制，打破传统游戏行业的壁垒，为玩家和创作者创造前所未有的机遇和体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值