使用带有透明像素的 CSS Sprites 和 repeat-x background-position答案

【问题标题】：Using CSS Sprites and repeat-x background-position with transparent pixels使用带有透明像素的 CSS Sprites 和 repeat-x background-position
【发布时间】：2012-01-03 09:30:37
【问题描述】：

我在问标题到底是什么意思...

#submenu-outer{
    height:40px;
    background: #F0EFE2 url(/template/img/main/intro12.png) 0px -240px repeat-x;
    width:100%;
}

那个代码没有意义；有什么建议？我想重复这一行的第一列。每隔一行（40px）在那里都是空的（0px -240px）

【问题讨论】：

嗨，你能做一个 jsfiddle 让我们看看你想要实现什么吗？干杯
我不确定这个问题是否有意义。您能否附上您想要实现的目标的图像？当你说That code makes no sense 时——你到底是什么意思？你不明白它在做什么？
您发布了一些代码，并说它“没有意义”。那你为什么发帖？它来自什么？你想用它做什么？尝试描述问题，而不是无效的解决方案。

标签： css size height background-image

【解决方案1】：

如果您使用repeat-x 作为背景位置，它将重复图像文件的整个宽度。因此，如果您的精灵在 40px 之后有透明像素，那么每隔 40px 左右就会有一些透明背景实际上是正常的。

你可以让你的重复图案占据整个精灵的宽度，或者把它放在一个单独的文件中。

【讨论】：