Question

我有一个h2，我正在尝试使用2px背景图像。我希望图像在h2中的单词之后开始，然后对h2中的剩余空间重复-x。由于单词长度不同，我不能简单地在html中放置静态图像。

我可以很好地获得背景图像并沿x轴重复。但是图像落后于文字，我不想要。

有没有办法让1.从文本后面开始重复图像，或2.以更好的方式完成此任务？

到目前为止，这是jsfiddle。

......以及随附的代码：

h2{

color:#253b74;
font-size:16px;
background-image:url('http://s8.postimg.org/ke8tx8jhd/hr_03.png');
background-repeat:repeat-x;
background-position:100% 50%;

}

和html：

<h2>PRODUCT IMAGE</h2>

Answer 1

这个怎么样：

<h2><span>PRODUCT IMAGE</span></h2>

h2 {
    color:#253b74;
    font-size:16px;
    background-image:url('http://s8.postimg.org/ke8tx8jhd/hr_03.png');
    background-repeat:repeat-x;
    background-position:100% 50%;
}
h2 span {
    background:white;
}

小提琴：http://jsfiddle.net/eQBgs/

Answer 2

怎么样：

<h2><span style="background: white;">PRODUCT IMAGE</span></h2>

CSS - 背景图像从起点重复x

2 个答案: