css sprite 调整大张图片中小图标的大小

直接说解决方法:

假设一张拼合好的大图大小是:900 x 1000 px (如上图)

现在想取图中左上角的河马图标,并缩小图标的大小。

正常取图:

.sprite {	
background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;	
width: 190px;
height: 154px;
}

现在取正常图标大小的一半:

<pre name="code" class="html">.sprite {	
background: url('all.png') no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
}

OK,大功告成!

最后推荐大家一款css sprite测量工具:http://www.spritecow.com/

打开,把拼合好的png图拖进去:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

药药切克闹!用酷炫的vue~制作酷炫的menu~

4155
来自专栏九彩拼盘的叨叨叨

零基础学前端 学习路线

781
来自专栏腾讯IVWEB团队的专栏

React 事件初探

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。创造 React 是为了解决一个问题:构建随着时间数...

7260
来自专栏flutter开发者

自定义View【2】

在前面的文章中我们学习了部分绘制的相关方法,在本篇文章中我们会继续再介绍一些常用的绘制方法。

1222
来自专栏IMWeb前端团队

React事件初探

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间...

2428
来自专栏京东技术

服务器端的图像处理 | 请召唤ImageMagick助你解忧

在客户端我们可以用 PhotoShop 等 GUI 工具处理静态图片或者动态 GIF 图片,不过在服务器端对于 WEB 应用程序要处理图片格式转换,缩放裁剪,翻...

4521
来自专栏SnailTyan

matplotlib的基本用法(四)——设置legend图例

本文主要是关于matplotlib的一些基本用法。 Demo import matplotlib.pyplot as plt import numpy as n...

2337
来自专栏Golang语言社区

Golang中image/jpeg包和image/png包用法

jpeg包实现了jpeg图片的编码和解码 func Decode(r io.Reader) (image.Image, error) //Decode读取一...

7724
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十六——模态框交互

    模态框也可以称为弹出窗,其作用是当用户点击某个功能按钮后,在网页上弹出一个内容窗口。在Bootstrap中,创建模态框十分简单。首先模态框组件通过mod...

1281
来自专栏企鹅号快讯

浅谈 Web 图像优化

前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像...

2179

扫码关注云+社区

领取腾讯云代金券