IMGタグの内容を透明にするが、タグの背景を作成しない方法は？

Question

タイトルが述べるように、CSSのみを使用して背景を透明にすることなく、IMGタグの画像を透明にするにはどうすればよいですか？ 私はHTMLにアクセスできないので、私はDIVを作ることができません。赤い背景の不透明度無し

画像：

img { 
    background-color: red; 
} 

opacity: 0.2;を用いた画像：

img { 
    background-color: red; 
    opacity: 0.2; 
} 

私はCSSで達成したい何

：

Answer 1

これを試してください：

は画像を保持し、あなたのイメージタグではなく、あなたのdiv内にCSSの透明性のスタイルを使用してください。

は、あなたがこのように考えてみます。

<div class="img_container"><img src="myimage.png"></div> 

あなたの制約は、あなたがのみimg要素のCSSを変更することができるということであれば、CSSが

div.img_container img { 
    opacity: 0.2; 
    filter: alpha(opacity=20); /* For IE8 and earlier */ 
} 

Answer 2

なり、その後、私はあなたがしたいことは考えられないと思います。背景を含むHTML要素に不透明度が適用されます。 HTML要素の選択部分の不透明度を設定することはできません。

あなたはJavascriptを使用できる場合は、あなたがdivまたはspan要素にimg要素（複数可）をラップするスクリプトを書き、このラッパー要素に同じ背景を適用することができます。 img要素が透明である場合、これは同じバックグラウンドで表示されます。

$(".classToWrap").wrap("<div class='wrapperClass'></div>");

Jsfiddle demo

Javascriptがどちらのオプションでない場合、私はこれを行う方法が表示されない：

jQueryがこのために使用することができますwrap機能を有していますCSSのみを使用します。

Answer 3

HTMLにアクセスできない場合は、新しいbackground-blend-modeを使用する唯一のオプションが残っています。これを調整することで、おおよその値に近づけることができます。これにはsrcではなく、background-imageを使用する必要があります。

もう1つの方法は、::before/afterコンテンツ挿入ハックと、blockをbackgroundとopacityで使用することです。これには、既知の寸法のimgという何らかの種類のコンテナが必要であり、おそらく少し制約があります。