标签: css-sprites

Twitter的bootstrap使用Glyphicons的Icons.它们available in dark gray and white默认为" ":

是否可以使用一些CSS技巧来改变图标的​​颜色？我希望有一些其他css3的亮度可以防止必须为每种颜色设置一个图标图像.

我知道你可以改变enclosing(<i>)元素的背景颜色,但我说的是图标前景色.我想可以反转图标图像上的透明度,然后设置背景颜色.

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

在本文http://css-tricks.com/css-sprites/中,它讨论了如何从1个较大的图像中裁剪出较小的图像.你可以告诉我是否有可能/我如何裁掉一个较小的图像,然后在我铺设之前缩小裁剪区域？

这是该文章的一个例子:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

我想知道如何在从spriteme1.png裁剪后缩放该图像

以下是示例的网址:http: //css-tricks.com/examples/CSS-Sprites/Example1After/

所以我想知道我是否可以将Item1,2,3,4旁边的图标缩小？

是否有任何好的工具来制作css精灵？

理想的我想给它一个图像目录和一个现有的.css文件引用那些图像并让它创建一个用所有小图像优化的大图像并更改我的.css文件来引用这些图像.

至少我希望它能够获取一个图像目录并生成一个大的精灵和.css,将每个精灵用作背景.

是否有任何好的photoshop插件或完全成熟的应用程序来做到这一点？

我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍然为某些图标提供替代文本.

我想为图像使用数据URI来减少HTTP请求的数量,但是生成透明图像的最小可能字符串是什么？

我意识到我可以使用数据URI:s来表示实际图像而不是精灵,但是当所有内容都保存在CSS中而不是分散时,它更容易维护.

我有这个HTML:

<div id="graphic">lorem ipsum</div>

用这个CSS:

#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}

我正在应用的背景图像是200x100像素,但我只想显示200x50像素的背景图像的裁剪部分.

background-clip似乎不是正确的CSS属性.我可以用什么呢？

background-position 不应该使用,因为我在精灵上下文中使用上面的CSS,其中我想要显示的图像部分小于定义CSS的元素.

我知道如何使用精灵,但是,IMG标签不是"src"属性吗？我总是可以使用SPAN或其他标签并设置背景/宽度/等,但它在语义上是不正确的.

基本上,我想省略SRC的IMG标签并仅使用精灵,但我担心HTML因技术原因无效.谢谢.

我想在网站上使用CSS精灵而不是单独的图像文件,用于大量相同大小的小图标.如何使用ImageMagick将它们连接(平铺)成一个大图像？

是否可以使用CSS sprite作为列表背景图像？通常,我用这样的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>元素的子弹？有一些名为list-style-image和list-style-position的CSS属性,但我不知道如何在没有list-style-image-width和list-style-image-height等属性的情况下使其工作同样.

谢谢.

我正在使用Compass(一个CSS框架)来生成精灵图像.它工作,但指南针只为每个图像生成一个背景位置.

是否有可能获得精灵中每个图像的宽度和高度？

这是我的代码:

@import "ico/*.png";
@include all-ico-sprites;

生成的代码:

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
}

.ico-bag-black {
  background-position: 0 -24px;
}

我想要的代码:

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
  width:40px;
  height:24px;
}

.ico-bag-black {
  background-position: 0 -24px;
  width:44px;
  height:30px;
}

谁能向我解释我怎么能这样做？谢谢.

我正在寻找一个像样的图像精灵生成器.我试过http://spritegen.website-performance.org/,但它不够"聪明",不足以处理多个图像尺寸,并将它们与图像之间的空白空间合并.

有什么建议？？？