html - html5/css3のカラーオーバーレイpng

Question

私はたくさんのpng画像を持っていますが、今はそれらの色を変えたいと思っています。これらすべての画像をフォトショップで開き、レイヤー スタイル (カラー オーバーレイ) を追加できます。

例: http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
黒をグレーに変更します。

しかし、HTML5/CSS3 でこれを行う簡単な方法はありますか?

Answer 1

CSS だけでも可能ですが、大きな制限があり、完璧なソリューションにはほど遠いものです。

HTML

<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>

CSS

img {
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}

制限は

• Webkit のみ
• 黒をより透明なもの、つまりグレーにのみ変更できます。カラーマスクは不可。

デモを見る- Chrome 26 でテスト済み。