フォアグラウンド画像効果を達成する

Question

幅と高さの異なる画像をいくつか表示しています。たとえば、newまたはhotのように、小さなオーバーレイの星や何かを追加するクラスまたは2つのクラスを追加できます。

通常、これは目的の画像を背景とするdivを作成することで解決されますが、私の画像はすべて未知のサイズです。これを達成する方法を見つけようとしています。現在のHTMLは構造である：<a><img></a>

私は存在していないCSSの機能を探しています：

img.new { foreground:transparent url('/images/new.png') no-repeat bottom right } 

私は本当に私の画像サイズをデータベース化することなく、この問題を解決することを望んで、そしてJavaScriptを使用しなくてもよ。しかし、JS/jqueryアプローチがエレガントであれば、私はすべて耳にします。

Answer 1

私はこれがあなたのために働くだろうどれだけわからないんだけど、あなたの代わりにあなたの<img>のご<a>要素にクラスを追加することができた場合：

<a class="new" href="..."><img src="..." alt="alt text"></a> 

その後、あなたはa:after擬似要素を追加してみてくださいすることができます絶対にあなたの<img>の上に配置し、それを背景画像としてオーバーレイアイコン与える：としてオーバーレイ画像の位置合わせの問題のビットがあります

a.new { 
    display: inline-block; 
    position: relative; 
} 

a.new:after { 
    display: block; 
    position: absolute; 
    content: ''; 
    width: /* width of overlay image or anything you choose */; 
    height: /* height of overlay image or anything you choose */; 
    right: 0; 
    bottom: 0; 
    background: transparent url('/images/new.png') no-repeat; 
} 

をは、作業するための位置合わせのためのインラインブロックになっていますが、それを補うために常に少しのオフセットを与えることができます（bottom）。 Here's a fiddle私が言っていることをあなたに教えてください。

Answer 2

セットアップの詳細を知らなくても、あなたが行うことができますことを心に来るいくつかあります：

1. 使用img.new:after（Some Quirksmode info on it.が）。しかし、それはいくつかbrowser support limitationsを持っています。古いブラウザの中にはこれをサポートしていないものもありますが、これをお勧めします。私はこれまでに素晴らしい結果を得ていました。IEをサポートしていない機能の後でIEが唯一のブラウザであるように見えるので、IE条件付きコメントにラップされたJavaScriptに落ちる可能性があります。
2. overflow:hiddenを使用していない場合は、画像、アンカータグ、または次の親の背景として設定することができます。これは、もちろん、あなたの正確なデザインに依存します。

3. アンカータグ内に絶対的に配置されたdivまたはspanを使用し、.newクラスのアンカーのみを表示します。したがって、このような何か：ラフの

   <a class="new"> 
   <span class="newBanner"> 
   <img/> 
   </a> 
   
   <style> 
   
   .newBanner { 
       display: none; 
       position: absolute; 
       top: 0; 
       right: 0; 
   } 
   
   .new .newBanner { 
       display: block; 
   } 
   
   </style> 
   

この最後の1の種類とは、おそらく微調整が必​​要になりますが、ポイントは、具体的には、スタイリングに.new .newBanner { display: block; }一部です。繰り返しますが、それは主にあなたの正確なデザインに依存していますので、私たちに与えることができる情報が多くなればなるほど、あなたに与えることができるより良い助けになります。