iPentec.com  /  Doc  /  CSS

目次

特定の形状でマスクして背景色のカラーを反転させる - 画像やSVGでマスクしたブレンド描画 - CSS

SVGを利用して特定の形状でマスクして背景色のカラーを反転させる描画コードを取得します。

概要

指定した形状で背景色や背景の画像のカラーを反転させて描画します。マスクにはSVG形式のパスを利用し、描画はCSS3の"mix-blend-mode"プロパティを利用します。

事前準備 : マスクする画像、SVGファイルの作成

画像ファイル

マスクする形状となる画像を作成します。今回は下図のiPentecのロゴの画像を利用します。マスクする領域の色は白で作成します。

SVGファイル

マスクする形状となるSVGファイルを作成します。今回は下図のiPentecのロゴのSVGを利用します。SVGの領域の色は白で作成します。

背景画像

背景画像として 下図の画像で back.jpg ファイルを準備します。

コード (画像を利用する場合)

下記のコードを記述します。
image-mix-blend.css
.page {
   background-color: #FFFFFF;
}
.back {
    width: 100%;
    height: 600px;
}
.back > img {
    width: 100%;
    z-index: 0;
}
.logo {
    position: fixed;
    left: 320px;
    top: 16px;
    z-index: 2;
    width: 320px;
    mix-blend-mode: exclusion;
    /*または*/
    /*
    mix-blend-mode: difference;
    */
}
.logo > img {
    width:100%;
}
.BottomSpace {
    height: 1600px;
}
image-mix-blend.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="image-mix-blend.css" />
</head>
<body>
    <div class="page">
    <p>ブレンド描画のサンプルです。</p>
    <div class="logo">
      <img src="logo-white.png" />
    </div>

    <div class="back">
        <img src="back.jpg" />
    </div>

    <div class="BottomSpace"></div>
    </div>
</body>
</html>

解説

div class="logo" タグで画像を表示します。
CSSファイルのlogoクラスの下記のプロパティにより、ロゴ表示はスクロールに追従せず、ブラウザの上部に固定表示され続けたままになります。positionプロパティの動作の詳細についてはこちらの記事を参照してください。
  position: fixed;
  left: 320px;
  top: 0px;

また、logoクラスの下記のmix-blend-modeプロパティにより背景とのブレンド表示を設定します。今回 exclusion を指定していますので、背景のカラーを反転した色を表示します。
  mix-blend-mode: exclusion;
また、
div class="back" タグでは背景となる画像を表示します。画像はスタイル指定によりWebブラウザの幅いっぱいに表示されます。
div class="BottomSpace" タグでは下部に余白を作成しています。スクロールにより画像がスクロールアウトできるだけの余白を下部に用意しています。

実行結果

上記のHTMLファイルをGoogle Chromeで表示します。下図のページが表示されます。画像の白い部分が背景色を反転させた色になっていることが確認できます。


ページを下にスクロールします。画像の白色部分で描画した部分が背景の画像のカラーを反転した色で表示されています。


背景画像の色を反転したものが描画されていることがわかります。背景色が白の部分に出ると、黒色で描画されます。


コード (svgを利用する場合)

下記のコードを記述します。
showsvg-mix-blend.css
.page {
    background-color: #FFFFFF;
}

.back {
    width: 100%;
    height: 600px;
}

.back > img {
    width: 100%;
    z-index: 0;
}

.logo {
    position: fixed;
    left: 320px;
    top: 0px;
    z-index: 2;
    width: 320px;
    mix-blend-mode: exclusion;
    /*または*/
    /*
    mix-blend-mode: difference;
    */
}

.BottomSpace {
    height: 1600px;
}
showsvg-mix-blend.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="showsvg-mix-blend.css" />
</head>
<body>
    <div class="page">
    <p>SVGの画像です。</p>
    <div class="logo">
      <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="0 0 677 192" style="enable-background:new 0 0 677 192;" xml:space="preserve">
        <style type="text/css">
        .st0 {
          fill: #FFFFFF;
        }
        </style>
        <g>
        <path class="st0" d="M249.1,125.7h-66.2c1,15.4,15,28,32.3,28c14.7,0,24.7-6.6,29.8-14.8c1.3-2.1,3.5-3,5.8-3
		c4.1,0,8.6,2.9,8.6,6.9c0,0.9-0.2,2-0.7,2.9c-6.8,13.1-21.4,22.4-43.6,22.4c-29.3,0-48.9-21-48.9-47.9c0-29.1,20.9-48.6,48.4-48.6
		c25.4,0,45.1,17.1,47.4,41.3c0,0.5,0,1.1,0,1.5C261.9,121.1,258,125.7,249.1,125.7z M245.1,109.3c-2.8-14.5-15.1-23.6-30.5-23.6
		c-17.3,0-29.5,11.4-31.6,26.4h60.1c1.5,0,2.1-0.3,2.1-1.5C245.3,110.2,245.1,109.7,245.1,109.3z" />
        <path class="st0" d="M349.9,167.2c-4.1,0-8.4-2.3-8.4-6.7v-48.3c0-16.6-7.4-25.6-22.9-25.6c-17,0-29.1,12.3-29.1,29.4v44.5
		c0,4.4-4.1,6.7-8.2,6.7c-4.3,0-8.6-2.3-8.6-6.9V79.2c0-4.6,4.1-6.7,8.1-6.7c4.1,0,8.1,2.1,8.1,6.4v8.2c4.1-8.7,17.5-15.5,30.1-15.5
		c26.7,0,39.4,14.6,39.4,40.2v48.6C358.3,164.9,354.1,167.2,349.9,167.2z" />
        <path class="st0" d="M416.7,163.2c-5.9,2.6-11.7,4-17,4c-11.9,0-20.7-6.9-20.7-20V88.5h-10.4c-3.8,0-5.8-3.7-5.8-7.2s1.8-7,5.8-7
		H379v-20c0-8.5,16.8-8.5,16.8,0v20h16.1c8.4,0,8.4,14.2,0,14.2h-16.1v55.8c0,5.2,3,8.4,8.4,8.4c2.5,0,5.4-0.6,8.7-1.8
		c0.8-0.3,1.5-0.3,2.1-0.3c3.6,0,5.9,3,5.9,6.2C421,159.3,419.7,161.9,416.7,163.2z" />
        <path class="st0" d="M506,125.7h-66.2c1,15.4,15,28,32.3,28c14.7,0,24.7-6.6,29.8-14.8c1.3-2.1,3.5-3,5.8-3c4.1,0,8.6,2.9,8.6,6.9
		c0,0.9-0.2,2-0.7,2.9c-6.8,13.1-21.4,22.4-43.6,22.4c-29.3,0-48.9-21-48.9-47.9c0-29.1,20.9-48.6,48.4-48.6
		c25.4,0,45.1,17.1,47.4,41.3c0,0.5,0,1.1,0,1.5C518.8,121.1,514.8,125.7,506,125.7z M502,109.3c-2.8-14.5-15.1-23.6-30.5-23.6
		c-17.3,0-29.5,11.4-31.6,26.4H500c1.5,0,2.1-0.3,2.1-1.5C502.2,110.2,502,109.7,502,109.3z" />
        <path class="st0" d="M615.4,146.6c-7.6,13.3-22.4,21.5-40.7,21.5c-29.3,0-49.1-21-49.1-48.2c0-27.1,19.8-48.3,49.1-48.3
		c18.4,0,31.4,8.1,39.4,19.2c1.2,1.7,1.6,3.2,1.6,4.7c0,4.4-4.4,7.6-8.7,7.6c-2.5,0-4.8-1.1-6.3-3.4c-4.8-7.8-14.2-13.6-26-13.6
		c-19.3,0-32.3,15.9-32.3,33.7s13,33.4,32.3,33.4c12.2,0,21.7-6.1,26.8-14.8c1.5-2.6,4.1-3.8,6.6-3.8c4.3,0,8.4,3.2,8.4,7.6
		C616.6,143.7,616.3,145.1,615.4,146.6z" />
        <circle class="st0" cx="54.8" cy="50.8" r="13.8" />
        <path class="st0" d="M63.6,159.1c0,4.5-3.9,8.1-8.7,8.1l0,0c-4.8,0-8.7-3.6-8.7-8.1V79.7c0-4.5,3.9-8.1,8.7-8.1l0,0
		c4.8,0,8.7,3.6,8.7,8.1V159.1z" />
        <path class="st0" d="M83.7,124.9c7.1,0,8.7,5.4,8.7,8v26.6c0,3.9-1.9,7.7-8.7,7.7l0,0c-6.9,0-8.7-5.2-8.7-7.7v-26.6
		C75,130.3,76.5,124.9,83.7,124.9L83.7,124.9z" />
        <path class="st0" d="M167.6,80.9c0-28.3-18.4-43.2-41.2-43.2h-44c-3.5,0-7.4,3.2-7.4,8.2c0,5.6,4.2,9.3,7.7,9.3h44
		c13.6,0,23.5,4.7,23.5,24.5c0,15.7-11.7,22-23.2,22H82.7c-3.5,0-7.7,2.2-7.7,8c0,6.3,3.7,9.3,7.1,9.3h44.3
		C151,119,167.6,106.8,167.6,80.9" />
        </g>
      </svg>
    </div>
    <div class="back">
        <img src="back.jpg" />
    </div>
    <div class="BottomSpace"></div>
    </div>
</body>
</html>

解説

div class="logo" タグでSVGを表示します。SVGの表示の詳細についてはこちらの記事を参照してください。
CSSファイルのlogoクラスの下記のプロパティにより、ロゴ表示はスクロールに追従せず、ブラウザの上部に固定表示され続けたままになります。positionプロパティの動作の詳細についてはこちらの記事を参照してください。
  position: fixed;
  left: 320px;
  top: 0px;

また、logoクラスの下記のmix-blend-modeプロパティにより背景とのブレンド表示を設定します。今回 exclusion を指定していますので、背景のカラーを反転した色を表示します。
  mix-blend-mode: exclusion;
また、
div class="back" タグでは背景となる画像を表示します。画像はスタイル指定によりWebブラウザの幅いっぱいに表示されます。
div class="BottomSpace" タグでは下部に余白を作成しています。スクロールにより画像がスクロールアウトできるだけの余白を下部に用意しています。

実行結果

上記のHTMLファイルをGoogle Chromeで表示します。下図のページが表示されます。SVGのパスで表現された "iPentec" の形状のカラーが背景色を反転させた色になっていることが確認できます。


ページを下にスクロールします。背景の画像のカラーを反転した色が "iPentec" の形状の色に設定されています。


背景画像の色を反転したものが描画されていることがわかります。



背景色が白の部分に出ると、黒色で描画されます。


補足 : 背景色を指定していないとブレンド描画が動作しない

背景色を指定しない場合は背景色は白で表示されますが、ブレンド描画の処理はされません。
動作を確認します。CSSファイルのpageクラスの background-color プロパティをコメントアウトします。
showsvg-mix-blend.css
.page {
  /* コメントアウトする */
  /*
    background-color: #FFFFFF;
  */
}

.back {
    width: 100%;
    height: 600px;
}

.back > img {
    width: 100%;
    z-index: 0;
}

.logo {
    position: fixed;
    left: 320px;
    top: 0px;
    z-index: 2;
    width: 320px;
    mix-blend-mode: exclusion;
}

.BottomSpace {
    height: 1600px;
}

CSSを修正後、ページをChromeで表示します。下図の表示結果となります。ページの背景色の白色部分では背景色が反転されて表示されません。これは背景色が「無い」状態として設定されているためであると考えられます。


ページをスクロールし、ページの画像内ではSVGの領域内では背景の画像が反転した状態が表示されます。画像の下端より下にスクロールし、背景が白の部分になると、背景色が反転されて表示されないため、SVGのパスは画面では見えない状態になります。

補足 2 : SVGをファイルで指定した場合

HTMLを下記に変更し、SVGファイルを指定した場合でも同様の表示になります。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="showsvg-mix-blend.css" />
</head>
<body>
    <div class="page">
    <p>SVGの画像です。</p>
    <div class="logo">
      <img src="logo-white.svg" />
    </div>

    <div class="back">
        <img src="back.jpg" />
    </div>

    <div class="BottomSpace"></div>
    </div>
</body>
</html>
著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2019-04-13
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.