セレクターを使用して画像を別の画像の上に配置しようとしています:beforeが、画像を要素の前に配置するだけでは機能せず、他の要素にしか配置できないことがわかりましたimg。具体的には、私のスタイルは次のとおりです。
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
そして、これはうまく動作することがわかりました:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
しかし、これは当てはまりません:
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
代わりにdivまたは要素を使用できます。ブラウザは 要素内の画像の上に画像を正しくオーバーレイしますが、 自体にオーバーレイ クラスを適用すると機能しません。pspanimgimg
この余分な部分が気に入りませんので、これを機能させたいと思いますspanが、もっと重要なのは、変更したいブログ投稿が約 100 件あり、スタイルシートを変更するだけであれば 1 回でこれを実行できますが、戻って 要素と要素spanの間に余分な要素を追加する必要がある場合は、作業がさらに増えるということです。aimg
ベストアンサー1
残念ながら、ほとんどのブラウザはimg タグでの:afterまたは の使用をサポートしていません。:before
http://lildude.co.uk/after-css-property-for-img-tag
ただし、JavaScript/jQuery で必要なことを実現することは可能です。次のフィドルを確認してください。
http://jsfiddle.net/xixonia/ahnGT/
$(function() {
$('.target').after('<img src="..." />');
});
編集：
これがサポートされていない理由については、coreyward の回答。