使用透明图像并重复

Question

我有一个选项卡，想要一个自定义图像来为选项卡中的部分文本添加下划线。 我有 3 张图像，左图像透明为 14px，然后是 1 像素宽的颜色，右图像与此相反，以及重复的 1 像素宽图像。

我发现中间重复图像在左右图像的透明部分可见（基本上使透明部分变得多余）。 这是有解决方法吗？ 我在网上没有找到任何东西，尽管它也是一个非常通用的搜索。

我正在为图像使用以下 css：

background-image:url(15pxRight.png), url(15pxLeft.png), url(1px.png); 
background-position: bottom right, bottom left, bottom center;
background-repeat:no-repeat, no-repeat, repeat-x;

我不想使用颜色，因为如果选择背景选项卡，它会改变颜色。 这可以修复吗？

Answer 1

如果您问为什么第 3 个 1px 图像出现在其他两个背景图像的透明部分下方，那么答案是因为它设置为 repeat-x .

3 张背景图像将彼此"分层"。不是并排，这就是我怀疑你认为他们会做的事情。

因此，无论第 3 张图像有多小，如果将其设置为 repeat-x，那么它将覆盖其容器的整个宽度。即使它将"落后于"其他两个图像，它也会显示"较高"层图像具有与较低图像重叠的透明像素的位置。