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

Question

我们目前将 145x45 标题徽标设置为移动标题的背景，并且标题的其余部分“背景颜色”与徽标的背景相匹配。

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

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

Answer 1

使用线条创建一个 1x45 图像，在 div 中使用 repeat-x，在该 div 中放置一个带有徽标图像的 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：代码不是testet，如果它不起作用，请告诉我。