从精灵重复背景

Question

我想创建一个带有几个将用作背景图像的精灵。其中一些将与norepeat一起使用，一些将具有repeat-x。

设置此类样式的最佳方法是什么？

到目前为止，我已经尝试了这个但是它无法正常工作：

CSS

.sprites {
    background-color: transparent;
    background-image: url(img/sprites.png);
        background-repeat: no-repeat;
}
.bg {
    width: 1px;
    height: 25px;
    background-position: 0 0;
    background-repeat: repeat-x;
}

HTML

<div class="sprites bg">

</div>

这甚至可能吗？

Answer 1

如果您只在x方向重复，请确保垂直放置图像。也就是说，不要并排放置两个不同的图像。

http://www.phpied.com/background-repeat-and-css-sprites/

Answer 2

我认为最好的方法是将非重复的Bgs与重复的Bgs分开。将所有非重复的bgs放在一个精灵图像中。对于重复的，如果它们具有相同的宽度，则只能将它们放在一起，并且必须垂直放置它们。