[解決済み] 画像に白色オーバーレイ

質問

画像にグレースケールフィルターを追加できることは知っていますが、フィルター設定を使用して白のオーバーレイは可能でしょうか？私は別のdivを必要とせず、cssを通してそれを行う必要があり、画像の上に絶対位置し、白い背景と不透明度の設定が変更されます。タグの中にシンプルな画像があるだけです。

<a href="#">
     <img src="http://placehold.it/300x200" />
</a>

cssは基本的なものです。

a img{
     display:block;
     max-width:100%;
     height:auto
}

解決方法は？

解決策1:

を使用することができます。 :after psuedo-elementです。例えば white-out を、あなたの <a> 要素を作成し、以下のCSSを使用します。

a.white-out {
    position: relative;
    display: inline-block;
}
    a.white-out:after {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,.5);
    }

jsFiddleデモ

解決策2:

また、背景を白にして <a> 要素の不透明度を下げ <img /> の中にあります。例えば

a.white-out {
    display: inline-block;
    background: #fff;
}
    a.white-out img {
        opacity: 0.2;
    }

jsFiddleデモ