0

2pxの背景画像に合わせようとしているh2があります。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 に答える