CSSのbackground-imageとmask-imageで背景画像を表示する方法と、背景画像の色を変える方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、CSSのbackground-imageとmask-imageで背景画像を表示する方法と、背景画像の色を変える方法について解説していきます。

1 background-imageとmask-imageで画像を表示する方法・画像の色を変える方法
- 1.1 マイクの SVG Icon の Src
- 1.2 SampleCodeと実装のポイント
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

background-imageとmask-imageで画像を表示する方法・画像の色を変える方法

背景画像を表示するには、CSSのbackground-imageプロパティを使います。

またbackground-imageで表示している画像の色を変えるには、background-colorやbackground-blend-mode、mask-imageなどを使っていきます。

今回は、上記の実装を説明するために、

次のようなハムスター画像と、黒色のマイクのSVG Icon を灰色にして表示する実装をSampleとして解説していきます。

上記ではハムスターの画像と、マイクのSVG Icon を表示しています。

ハムスターの画像はbackground-imageで表示しており、

マイクの SVG Iconはbackground-imageとmask-imageで、Colorをgrayに変えたIconを表示しています。

マイクの SVG Icon の Src

マイクの SVG Icon は、次のような黒い色のマイクを使用していますが、今回の実装では、灰色に変えます。

マイクの SVG Icon の Srcは、次のとおりです。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#4B4B4B;}
</style>
<g>
	
		<rect x="19.564" y="447.635" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -285.559 842.3594)" class="st0" width="24.231" height="65.371" style="fill: rgb(75, 75, 75);"></rect>
	<polygon class="st0" points="0.17,494.699 46.394,448.809 63.188,465.945 17.133,511.66 	" style="fill: rgb(75, 75, 75);"></polygon>
	<path class="st0" d="M263.682,147.594L43.473,412.466l56.061,56.061l264.872-220.21L263.682,147.594z M99.534,468.528
		l264.872-220.21" style="fill: rgb(75, 75, 75);"></path>
	<path class="st0" d="M43.642,412.297l220.223-264.551l100.371,100.738L99.549,468.203L43.642,412.297z" style="fill: rgb(75, 75, 75);"></path>
	<path class="st0" d="M273.211,120.521l118.268,118.268c29.522,0.34,59.073-10.42,82.226-31.882L305.092,38.295
		C283.631,61.447,272.872,90.999,273.211,120.521z" style="fill: rgb(75, 75, 75);"></path>
	<path class="st0" d="M391.48,238.551l-118.1-118.199c-0.279-30.238,11.02-59.379,31.887-81.891l168.268,168.614
		c-22.131,20.18-50.791,31.484-80.695,31.484L391.48,238.551z" style="fill: rgb(75, 75, 75);"></path>
	<path class="st0" d="M477.097,34.904C437.35-4.844,376.59-10.594,330.612,17.4L494.6,181.387
		C522.594,135.409,516.844,74.65,477.097,34.904z" style="fill: rgb(75, 75, 75);"></path>
	<path class="st0" d="M330.783,17.23c18.611-10.984,40.072-16.992,62.018-16.992c31.787,0,61.664,12.371,84.127,34.832
		c38.895,38.898,46.123,98.863,17.625,145.93L330.783,17.23z" style="fill: rgb(75, 75, 75);"></path>
</g>
</svg>

ちなみに、SVG Icon の Src を簡単に確認する方法は、こちらの記事をご確認ください。

SVGファイルの画像イメージを確認したり、入手する方法

SampleCodeと実装のポイント

それでは実際のSampleCodeを見ていきます。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        object-fit: cover;
        background-image: url("https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg");
        /* サイズを指定することができます。 */
        background-size: cover; /* 画像をコンテナに合わせる */
        /*
          画像の位置を調整する
          => pxや%などの数値で指定するほか、centerやtop、rightなどの位置を単語で設定することもできます。
        */
        background-position: center center;
        /* 画像を繰り返さない設定 */
        background-repeat: no-repeat;
      }

      .container2 {
        width: 150px;
        height: 150px;
        object-fit: cover;
        background-image: url("./karaoke.svg");
        /* サイズを指定することができます。 */
        background-size: cover; /* 画像をコンテナに合わせる */
        /*
          画像の位置を調整する
          => pxや%などの数値で指定するほか、centerやtop、rightなどの位置を単語で設定することもできます。
        */
        background-position: center center;
        /* 画像を繰り返さない設定 */
        background-repeat: no-repeat;
        /* 
          background-blend-mode は、要素の背景画像と背景色をどのように混合するかを制御するプロパティ
          => つまり、background-image と background-color を どんな感じに Mix するかを制御するわけです。
         */
        background-blend-mode: color;
        /* 背景色 */
        background-color: gray;

        /* 
          標準の mask-image プロパティ 
          => mask-imageは、CSSマスクを設定するためのプロパティです。
          => 標準のCSSプロパティであり、主要なモダンブラウザでサポートされています。
        */
        mask-image: url("./karaoke.svg");

        /* 
          -webkit-mask-image 
          => Webkitベースのブラウザ向けの 専用・プロパティ 
          => WebKitエンジンを採用したブラウザ（例：Safari など）で使用される専用・プロパティ
          => つまり、-webkit-mask-image は、特定のWebkitベースのブラウザや、古いブラウザでの互換性のために使用されます。
          => 基本的に mask-image を使用するなら -webkit-mask-image も合わせて使用します。
        */
        -webkit-mask-image: url("./karaoke.svg");
      }
    </style>
  </head>
  <body>
    <h2>background-image Test</h2>
    <!-- 1. 背景画像の表示・Test -->
    <div class="container"></div>

    <!-- スペーサー -->
    <div style="height: 80px"></div>

    <!-- 2. 背景画像の表示 & Color変更・Test -->
    <div class="container2"></div>
  </body>
</html>

ハムスターの背景画像の表示は、background-imageプロパティで行っています。

灰色のマイクのSVG Iconの表示は、画像の色を変えるために、background-colorとbackground-blend-modeを設定して、さらにmask-imageで、マイクのSVG Iconを読み込んでいます。

ちなみに、灰色のマイクのSVG Iconの表示は、background-colorとbackground-blend-modeをコメントアウトしても表示できます。

ただし、background-color をあてないと黒色のマイクのSVG Iconすら表示されません。

考え方としては、もともとあった背景画像に mask-image と colorを重ねている状態と、mask-image に colorを重ねている状態の違いです。