1

スタイルシートの各H2の下に画像を追加したいと思います。背景画像を試してみましたが、文言をカバーしています。border-imageも試しましたが、うまくいきません（正しく理解しているかどうかはわかりません）。

それは可能ですか？CSSだけでそれを達成するにはどうすればよいですか？

 // Sample CSS
 #content_area h2 {
     color: #107408;
     -moz-border-image:url(h2_background.png) 30 30 round; /* Firefox */
     -webkit-border-image:url(h2_background.png) 30 30 round; /* Safari */
     -o-border-image:url(h2_background.png) 30 30 round; /* Opera */
     border-image:url(h2_background.png) 30 30 round;
 }
4

2 に答える 2

3

元のh2に戻り、次のようなことを行います。

h2{
     background:#ffffff url('myimage.png') no-repeat left bottom;
     padding-bottom:4px;
}

パディングにより、画像を配置できるスペースが追加されます

于 2012-10-24T17:36:06.730 に答える
1

疑似要素を使用できます:after。

「：after」疑似要素を使用して、要素のコンテンツの後にコンテンツを挿入できます。

次の例では、各要素の後に画像を挿入します。

例：

h2:after {
   content:url(smiley.gif);
}

CSS疑似要素からの引用。

于 2012-10-24T17:32:27.297 に答える