html - CSS見出しに背景画像を設定する

Question

見出しの背景として画像を設定したいのですが、空の領域のみです。見出しのテキストがある場所に背景を表示したくありません。だから、私は見出しのために次のHTMLを持っています：

<h2><span>Some text</span></h2>

h2{
    background: url("image.png");
}

問題は、この見出しの背景をスパンに表示したくないということです。代わりに、スパンにページの背景画像（親要素）を適合させたいのです。ページの背景と一致しないため、スパンに特定の背景を設定できません。では、どうすればこれを解決できますか？

score 1 · Accepted Answer

画像の背景位置をテキストと調整する必要があります。正確なレイアウトがわからないので、それに応じて値を調整してください。

CSSだけでは、テキストがどこにあるか、またはテキストがどれだけビットであるかを検出できません。そのためにはJavaScriptを使用する必要があります。

h2 {
    background: url(image.png);
    background-repeat:no-repeat;
    background-position:5px 5px;
    padding-left:30px;
}

score 1 · Accepted Answer

これを実現するためにpsuedo要素を使用できます。

   h1:before 
 {
 content:url(your_img.jpg);
 }

2 に答える 2