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

Posted 2023-03-06

【中文标题】使用带有透明像素的 CSS Sprites 和 repeat-x background-position

【英文标题】：Using CSS Sprites and repeat-x background-position with transparent pixels

【发布时间】：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 时——你到底是什么意思？你不明白它在做什么？

您发布了一些代码，并说它“没有意义”。那你为什么发帖？它来自什么？你想用它做什么？尝试描述问题，而不是无效的解决方案。

【参考方案1】：

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

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