Tag: css sprites

为列表（<li>）使用CSS精灵背景图片

有没有可能使用CSS精灵的列表背景图片？ 通常情况下，我用这样的CSS呈现我的精灵： .sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } .sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; } <div class="sprite sprite-checkmark"></div> 是否有可能使用精灵的<li>元素的子弹？ 有CSS属性称为列表样式图像和列表样式的位置，但我不知道如何使它的工作没有像列表样式图像宽度和列表样式图像高度的属性的存在以及。 谢谢。

如何使用ImageMagick将图标连接成单个图像？

我想在网站上使用CSS精灵 ，而不是单独的图像文件，大量的小图标都是相同的大小。 我怎样才能使用ImageMagick连接（平铺）成一个大的图像？

使用CSS剪裁/剪裁背景图片

我有这个HTML： <div id="graphic">lorem ipsum</div> 与这个CSS： #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} 我正在使用的背景图像是200×100像素，但我只想显示200×50像素的背景图像的裁剪部分。 background-clip似乎不是这个正确的CSS属性。 我可以用什么来代替？ 不应该使用background-position ，因为我在一个精灵上下文中使用了上面的CSS，在这个上下文中，我想要显示的图像部分小于定义了CSS的元素。

使用IMG标签的精灵？

我明白如何使用精灵，但是，不是IMG标签所需的“src”属性？ 我总是可以使用SPAN或其他标签，并设置背景/宽度/等，但它不会在语义上是正确的。 基本上，我想省略一个IMG标签的SRC，只使用精灵，但我担心HTML在技术上是不正确的，因为它。 谢谢。

工具，使CSS的精灵？

有没有什么好的工具来制作CSS精灵？ 理想情况下，我想给它一个图像的目录和一个现有的.css文件引用这些图像，并创build一个大的图像优化所有的小图像，并改变我的.css文件引用这些图像。 至less我想它需要一个图像的目录，并生成一个大的精灵和.css需要使用每个作为背景。 有没有好的Photoshop插件或完全吹嘘的应用程序来做到这一点？

我如何缩放一个CSS精灵的图像

在这篇文章http://css-tricks.com/css-sprites/中 ，它讲述了如何从一个更大的图像中裁剪一个较小的图像。 你可以告诉我，如果可能的话，我可以裁剪一个较小的图像，然后在裁剪出来之前缩放裁剪掉的区域？ 这篇文章是一个例子： A { background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png); background-position: -10px -56px; } 我想知道如何从spriteme1.png中裁剪出这个图像 以下是该示例的url： http : //css-tricks.com/examples/CSS-Sprites/Example1After/ 所以我想知道是否可以让Item1,2,3,4旁边的图标更小？

最小的数据URI图像可能用于透明图像

我使用透明的1×1图像与背景图像，以便能够使用精灵，并仍为一些图标提供替代文字。 我想为图像使用数据URI来减lessHTTP请求的数量，但是生成透明图像的最小string是多less？ 我意识到我可以使用数据URI：s作为实际的图像而不是精灵，但是当所有东西都保存在CSS中而不是分散的时候，它更容易维护。

我可以使用CSS为引导图标添加颜色吗？

Twitter的引导使用Glyphicons的图标 。 默认情况下它们是“ available in dark gray and white ”的： 是否有可能使用一些CSS技巧来改变图标的​​颜色？ 我希望有一些其他的CSS3辉煌，这将防止必须为每种颜色设置图标图像。 我知道你可以改变封闭（ <i> ）元素的背景颜色，但是我正在谈论图标的前景色。 我想这是可以反转图标图像的透明度，然后设置背景颜色。 那么，我可以使用CSS为引导图标添加颜色吗？