从精灵重复背景

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

这甚至可能吗？

来源

2012-07-23 santa

我觉得去最好的办法是将非重复BGS反复们分开。将所有无节制的bgs放入一个精灵图像中。对于重复的，如果它们具有相同的宽度，则只能将它们放在一起，并且必须将它们垂直放置。

来源

2012-07-23 21:03:03 bingjie2680

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

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

来源

2012-07-23 21:02:05 Andrew

使用此方法的唯一警告是容器必须具有明确的高度才能隐藏背景图像的其余部分。 – Bojangles 2012-07-23 21:12:43

是的，这是一般使用精灵的警告。 – Andrew 2012-07-23 21:17:02

从精灵重复背景

回答

相关问题