CSS repeat-x 仅用于最右边的像素行

Question

我们目前将 145x45 的页眉 Logo 设置为移动页眉的背景，并将页眉的其余“背景颜色”与 Logo 的背景相匹配。

Logo 在图像顶部有一条几像素高的线，在当前配置下它不会延伸到图像之外。

如何使 Logo 最右边的 1px(w) x 45px(h) 填充(重复 x？)标题的其余部分，以便图像顶部的线延伸到整个标题？

Answer 1

用线条创建一个 1x45 图像，在 div 中使用 repeat-x，在该 div 中放置一个带有 Logo 图像的 div，如下所示:

<div style="background-image: url('line_image.png'); background-repeat: repeat-x: height: 45px;">
    <div style="background-image: url('logo.png'); background-repeat: no-repeat; height: 45px;"></div>
</div>

抱歉内联 CSS，应该在 .css 文件中。

PS:代码未测试，如果不起作用请告诉我。