css - 要素が画像よりも大きい場合に画像スプライトを使用する方法は?

Question

イメージスプライトを使用したいが、スタイリングする要素が個々のアイコンよりもはるかに大きい場合、これを行うことはできますか?

次の例では、実際のテキストとほぼ同じサイズの小さなアイコンで各 p のスタイルを設定したいとします。画像スプライトの他のアイコンが表示されないようにするには、各アイコンの間に多くの空白が必要です。これにより、おそらくファイルサイズと http リクエストの数が無効になる可能性があります。

p {
       background: gold;
        line-height: 6em;
}
<p>Text</p>
<p class="one">Text 2</p>
<p class="two">Text 3</p>
<p class="three">Text 4</p>

マークアップを追加するための唯一の堅牢なオプションはありますか? EG イメージスプライトが適用され、高さと幅が固定されている各 p タグにスパンを追加できます。ただし、マークアップを追加しないソリューションが理想的です。

score 2 · Accepted Answer

:before/:after 疑似要素を使用して、スプライトを含めることができます。

p:before {
  content: '';
  display: inline-block;
  background: url('http://placekitten.com/100/100') no-repeat;
  width: 50px;
  height: 50px;
}

1 に答える 1