web-dev-qa-db-ja.com

1つの画像の色修飾子としてのCSSフィルター

HueRotate、Saturation、BrightnessなどのCSS Filterメソッドを使用して、完全に白で描画されるPNGの色を変更することは可能ですか？ Photoshopのカラーオーバーレイ効果に似ていますが、CSSにあります。

これは、色のみを変更する画像を大量に作成しないようにするための優れたソリューションです。たとえば、UIの暗いバージョンと明るいバージョンのアイコンのセット。

csscss3hsl
16
Mateus Leon

また、セピアを追加し、次に彩度、色相回転、 CSSで：

filter: sepia() saturate(10000%) hue-rotate(30deg)

これにより、白い画像が緑色の画像になります。

http://jsbin.com/xetefa/1/edit

27
Ciantic

これはクールなアイデアですが、提案されているように白い画像では機能しません。色付きの画像でそれを行うことができますが、それがすべて白の場合はできません。 CSSフィルターのwebkitバージョンを使用してSafariで次のことを試しました。

<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

しかし、ボックスは白のままです。このように色を青に切り替えると：

<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

赤い箱を受け取ります。これは、白または黒では存在しない色相値でフィルターが機能するためです。

7
bitfiddler

ありがたいことに方法があります！

前述の主な問題は、グレースケール画像には本質的に色がないことです。ありがたいことに、ある色でポンプできるフィルターがあります！

sepia(100%)

ベースカラーが#cccであるソリッドカラーイメージで次のCSSスタイルを試しました

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

画像の色をライムグリーンに変更することができました。

楽しむ;）

5
xRavisher

brightnessを100%より大きくしてみてください。 100%をさらに上に移動すると、画像が白にフェードし始めます。画像の暗さによって、100%からどれだけ遠くに移動する必要があるかが決まります。

img {

      -webkit-filter: brightness(1000%);

}

Google CanaryユーザーのみがCSS3フィルターを表示でき、CSS3フィルターは他のブラウザーの画像に影響しないことに注意してください。 （したがって、少なくとも）。

5
j0sh1e