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

投稿者:

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

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

以下にサンプルを示す。

サンプル1(blend-mode:normal)
背景色と画像をブレンドさせないときはこのように表示される
サンプル2(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">
サンプル1(blend-mode:normal)<br>
背景色と画像をブレンドさせないときはこのように表示される
</div>
<div id="blend-soft-light">
サンプル2(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以外のブラウザで見て欲しい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください