171得票15回答
如何在CSS精灵中缩放图像

在这篇文章http://css-tricks.com/css-sprites/中,它讲述了如何从一张大图中裁剪出一个小图。请问是否可能以及我应该如何在布局之前裁剪出一个较小的图像并缩放裁剪的区域?以下是来自该文章的示例:A { background-image: url(http://ww...

161得票14回答
我可以用CSS为Bootstrap图标添加颜色吗?

Twitter的Bootstrap使用Glyphicons图标。它们默认情况下是"黑灰色和白色可用": 是否有可能使用CSS技巧改变图标的颜色?我希望有其他CSS3的技术可以避免为每种颜色设置一个图标图像。 我知道可以更改包含(<i>)元素的背景颜色,但我指的是图标前景色。...

160得票12回答
最小的数据URI透明图像是什么?

我正在使用一个背景图片为透明的 1x1 图片来支持使用雪碧图并为一些图标提供替代文本。 我想使用一个数据 URI 来减少 HTTP 请求的数量,但是生成一个透明图片的最小可能字符串是什么? 我意识到我可以使用数据 URI 来代替雪碧图中的实际图片,但是将所有内容都保存在 CSS 中比分散落...

127得票21回答
制作CSS雪碧图的工具?

有没有好用的工具可以制作CSS雪碧图? 理想情况下,我希望它可以接收一个图片目录和一个已经引用这些图片的.css文件,并生成一个包含所有小图片优化后的大图片,并自动修改我的.css文件以便引用新的图片。 至少,我希望它能够接收一个图片目录并生成一个大的雪碧图以及必要的.css文件来将每张图...

83得票3回答
使用CSS裁剪/调整背景图片

我有这个HTML:<div id="graphic">lorem ipsum</div> 使用此CSS:#graphic { background-image: url(image.jpg); width: 200px; height: 100px;} 我应用的背景图像...

62得票6回答
使用IMG标签与精灵图?

我明白如何使用精灵图,但是,IMG标签不是需要一个"src"属性吗?我可以使用SPAN或其他标签,并设置背景/宽度等,但这样不符合语义正确性。 基本上,我想省略IMG标签的SRC,只使用精灵图,但担心由于这个原因HTML不符合技术规范。

44得票4回答
如何使用ImageMagick将图标合并为单个图像?

我想在网站上使用CSS精灵代替单独的图像文件,用于一个大量、大小相同的小图标集合。如何使用ImageMagick将它们连接(平铺)成一个大图像?

35得票7回答
使用CSS精灵技术来设置列表(<li>)的背景图片

是否可以使用CSS精灵来作为列表的背景图像?通常,我会像这样使用CSS来渲染我的精灵:.sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -2...

35得票8回答
为什么使用精灵表而不是单独的图片?

我注意到一些网站使用一个包含许多小图像的巨大图像,然后使用CSS的background-position来定义每个图像的坐标,而不是使用单独的图像。 以下是我对使用大精灵表的缺点: 需要加载大图像才能显示一个小图像 需要编写(或生成)带有每个图像类的长样式表 使CSS混乱的类定义可能会影...

32得票2回答
指南针:生成精灵,以及在精灵中的每个图像上添加宽度/高度。

我正在使用 Compass(一个 CSS 框架)来生成雪碧图像。它可以工作,但是 Compass 只为每个图像生成了 background-position。 是否可能获取 sprite 中每个图像的宽度和高度? 这是我的代码:@import "ico/*.png"; @include a...