やりたいこと
黒のみで書かれている下記png透過画像をcssのみを利用して色変更させたい
やったこと
filterでがんばってもらう
color.html
<hr><divalign="center"><imgsrc="/img/test.png"/>元画像
</div><hr><divalign="center"class="red"><imgsrc="/img/test.png"/>赤
</div><hr><divalign="center"class="green"><imgsrc="/img/test.png"/>緑
</div><hr><divalign="center"class="blue"><imgsrc="/img/test.png"/>青
</div><hr>color.css
.red{filter:invert(15%)sepia(95%)saturate(6932%)hue-rotate(358deg)brightness(95%)contrast(112%);}.green{filter:invert(17%)sepia(91%)saturate(7085%)hue-rotate(128deg)brightness(100%)contrast(106%);}.blue{filter:invert(8%)sepia(99%)saturate(7044%)hue-rotate(247deg)brightness(100%)contrast(145%);}その他の色達
other.css
白filter:invert(88%)sepia(61%)saturate(0%)hue-rotate(229deg)brightness(107%)contrast(101%);灰色filter:invert(50%)sepia(0%)saturate(11%)hue-rotate(143deg)brightness(101%)contrast(93%);黄色filter:invert(81%)sepia(81%)saturate(633%)hue-rotate(359deg)brightness(106%)contrast(105%);オレンジfilter:invert(72%)sepia(26%)saturate(6428%)hue-rotate(1deg)brightness(105%)contrast(102%);水色filter:invert(88%)sepia(100%)saturate(2929%)hue-rotate(104deg)brightness(99%)contrast(104%);紫filter:invert(11%)sepia(71%)saturate(5170%)hue-rotate(293deg)brightness(87%)contrast(111%);結果
このCSSだけで別の色の画像データを用意しなくても色々変えられます
また、filterは縦並びにすると効かなくなるので注意です