CSSだけでbackground-imageに設定した画像の色を変える

文章で説明するのが少し難しいですがCSSだけで画像の色を変更します。

色違いのアイコンを複数用意できない場合に役立つと思います。SVGやCanvasとも違いますがCSSだけでもレイヤーや重なりの概念が使えます。

論より証拠、説明よりもサンプルの方がありがたいと思うので早速。

こちらの某狩猟ゲームに登場しそうなアイコンをbackground-imageに指定して色を変更します。

結果はこのようになります↓

黒の部分は黒のまま、白の部分が色付けされ、灰色の部分は中間色です。

コードはこんな感じ。

html

<div class="bg-icon item-1 col-1"></div>
<div class="bg-icon item-1 col-2"></div>
<div class="bg-icon item-1 col-3"></div>
<div class="bg-icon item-2 col-4"></div>
<div class="bg-icon item-2 col-5"></div>
<div class="bg-icon item-2 col-5"></div>

このdivの「背景画像」と「画像の色」と「マスク」を指定します。

css

.bg-icon {
    width: 76px;
    height: 76px;
    background-size: auto;
    display: inline-block;
    background-repeat: no-repeat;
    overflow: hidden;
    background-blend-mode: multiply;
    background-image: url(画像パス);
    mask-image: url(画像パス);
    -webkit-mask-image: url(画像パス);
}

.item-1 {
    background-position: 0px -0px;
    mask-position-x: -0px;
    -webkit-mask-position-x: -0px;
}

.item-2 {
    background-position: -76px 0;
    mask-position-x: -76px;
    -webkit-mask-position-x: -76px;
}

.col-1 {    background-color: #dedede;}
.col-2 {    background-color: #5e5e5e;}
.col-3 {    background-color: #fb8cc8;}
.col-4 {    background-color: #f1ef38;}
.col-5 {    background-color: #ffbe23;}
.col-6 {    background-color: #ff6b3d;}

解説

背景画像は1つの画像にまとめてbackground-positionを指定しています。

色用のclassにbackground-colorを指定することで画像の背景に色が付きます。

background-colorで色が付くのは透過部分なので結果はこのようになります。

これでは狙った結果ではないのでbackground-blend-modeで色（レイヤー）の混ぜ方を変更します。今回はmultiply（乗算）を指定します。

白い部分に色が乗り、黒い部分はそのままになりました。最後にはみ出た部分を消すために同じ画像でマスクします。mask-imageで同じ画像のパスを指定します。

今回のように画像を1つにまとめた場合はmask-positionを指定しましょう。

mask-imageとmask-positionはプレフィックスが必要なブラウザもあるので各自で確認してください。現時点ではwebkitが必要です。

ということで以上です。CSSにもレイヤーの概念があることは知っていましたが、一般的な画像編集ソフトのような処理ができるのは知りませんでした。

調整するのは手間ですが動作パフォーマンスは良いんですよね。

もっと動的に変更するならJavaScriptにCanvasを描かせましょう。