[CSS]背景画像を背景色に溶け込ませる

ウェブサイトの背景画像を背景色に溶け込ませるように表示するには、CSSで、background-imageで画像、background-colorで色を指定して、それらを合成するbackground-blend-modeを設定する。

#blend1 {
    background-image: url("画像ファイルのURL");
    background-color: lightblue; /* 背景色 */ 
    background-blend-mode: soft-light; /* ブレンドモードを指定 */
}

以下にサンプルを示す。

サンプル１（blend-mode:normal）
背景色と画像をブレンドさせないときはこのように表示される

サンプル２（blend-mode:soft-light）
background-blend-modeをsoft-lightにすると画像が背景に溶け込んだように見える。

上のサンプルのソースコードはこんな感じ

<style>
#blend-normal {
    width: 400px;
    height: 400px;
    margin-bottom:1px;
    background-image: url("http://www.fineblue206.net/wp/wp-content/uploads/2019/09/bird_okameinkogray.png");
    background-color: lightblue;
    background-blend-mode:normal;
}
#blend-soft-light {
    width: 400px;
    height: 400px;
    background-image: url("http://www.fineblue206.net/wp/wp-content/uploads/2019/09/bird_okameinkogray.png");
    background-color: lightblue;
    background-blend-mode:soft-light;
}

</style>
<div id="blend-normal">
サンプル１（blend-mode:normal）<br>
背景色と画像をブレンドさせないときはこのように表示される
</div>
<div id="blend-soft-light">
サンプル２（blend-mode:soft-light）<br>
background-blend-modeをsoft-lightにすると画像が背景に溶け込んだように見える。
</div>

ブレンドモードに関しては「soft-light」以外に様々な効果が用意されている。詳しくは以下のサイトを見て欲しい。
http://www.htmq.com/css/background-blend-mode.shtml

さてここまで来て「あれ？画像と背景が溶け込んでなんていないぞ」と思った人いませんか？

それはあなたがブレンドモードを実装していないブラウザでこのページを見ているからだ。この記事を書いている時点（2019年9月）でMicrosoft製ブラウザ「 Edge」と「Internet Explorer」が対応していない。Edgeに関してはPC版は対応していないけどスマホ向けのモバイル版は対応しているというちぐはぐな状況だ。Chromeや他のメジャーなブラウザがブレンドモードを実装しているのでPC版Edgeもそのうち対応すると思われる。IEに関してはもう過去の遺産のような扱いなので望み薄だろうけど。

とにかくブレンドモードの効果を見たい人はEdgeとIE以外のブラウザで見て欲しい。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル