1

我想创建一个包含几张用作背景的图像的精灵。其中一些将与 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>

这甚至可能吗？

4

2 回答 2

1

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

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

于 2012-07-23T21:02:05.567 回答
1

我认为最好的方法是将不重复的 Bgs 与重复的 Bgs 分开。将所有 norepeated bgs 放在一个 sprite 图像中。对于重复的，只有在宽度相同的情况下才能将它们放在一起，并且必须垂直放置。

于 2012-07-23T21:03:03.100 回答