1

このサイトには、このような H3 が必要な部分があります...

------------------- 中央揃えのテキスト -------------------

「---」の部分は派手なウィグリーの背景画像です。左のものと右のものはお互いの反射です。

そこで1つの選択肢は...

<h3>
    <div class="left-image-thing"></div>
    <span>Centered Text Here</span>
    <div class="right-image-thing"></div>
</h3>

...そしてスパンの周りのdivに画像を入れます。しかし、私はただ持っていたい...

<h3>Centered Text Here</h3>

...そして、左右の背景画像に css を使用するだけです。これを行う方法はありますか？タグ、CSSなどは1つだけですか？

4

2 に答える 2

1

疑似要素、:beforeおよび を使用できます:after。

h3 {
   text-align: center;
}

h3:before { 
    content: url('myimageurl1.png');
}

h3:after { 
    content: url('myimageurl2.png');
}

もちろん、CSS はより複雑になりますが、これはユース ケースを処理する方法です。

編集：ここに例があります。

于 2013-01-10T21:27:47.153 に答える
0

ローエンドのブラウザをサポートする必要があるため、疑似要素は私を怖がらせます...これはどこでも機能します（ローエンドでも）：

CSS:

h3 {
   background: url('myimageurl1.png') no-repeat left middle;
   padding-left: 100px /*This should be the width of myimageurl1.png */
}

h3 span {
   background: url('myimageurl2.png') no-repeat right middle;
   padding-right: 100px /*This should be the width of myimageurl2.png */
}

HTML:

<h3><span>Centered Text Here</span></h3>
于 2013-01-11T00:20:01.530 に答える