CSSでアイコン画像の色を変更する

2023年12月12日

mask-imageとbackground-colorを使って、アイコン画像の色を変更する方法を学びました。

サンプル

変更したい色をbackground-colorで指定します。

コード↓

.mask-image {
 width:300px;
 aspect-ratio:1/1;
 background-color:rgba(0, 0, 0, 0.1);
}

この時の表示↓

mask-imageプロパティでアイコン画像を指定し、その形で要素を切り抜きます。

コード↓

.mask-image {
  -webkit-mask-image: url("./icon.png");
  -webkit-mask-size: 100%; /*初期値はauto*/
}

Chromeでは120から-webkit-の接頭辞なしでも動作するようになりました。

切り抜きのイメージ動画↓

よかったらシェアしてね！