0

我有一个 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>
4

2 回答 2

4

这个怎么样：

<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/

于 2013-05-23T19:49:56.193 回答
1

怎么样：

<h2><span style="background: white;">PRODUCT IMAGE</span></h2>
于 2013-05-23T19:50:08.423 回答