新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
CSSで画像に乗算モードで色を乗せる方法は、実在する!【CSS3】

Photoshop(フォトショップ)では、様々なブレンドモード(描画モード)が実現できます。

その表現を応用すればデザイン性の高い作品も作れますが、ホームページで、とくに更新の頻度が高いページに使う素材として描画モードを施した画像を扱うのは作業の手間がかかるもの。

でも、Photoshopと同様の描画モードがCSSで実現できるとしたら、いかがでしょう?

今回は、その方法をご紹介します。

この記事の目次

【結論】CSSだけでPhotoshopのようなブレンドモード(描画モード)を表現する記述

CSSで画像に描画モードを施すにはCSS3のbackground-blend-mode属性を使います。

まずはHTMLの記述から。

下記の例ではtdタグで背景画像を指定しますが、もちろんdivタグなどなど、背景画像を指定できるものなら他のタグでもOKです!

<table class="className">
<tr>
<td class="img01"><img src="images/pixel.png" alt="雲海と妙高山" /></td>
<td class="img02"><img src="images/pixel.png" alt="新潟の海の夕日" /></td>
</tr>
<!-- END.className //--></table>

続きまして、CSSの記述です。

2組のスタイル定義がありますが、指定している背景画像以外は同じです(^^)

カギになるのが、それぞれのスタイル定義の最後の行で指定している、

[background-blend-mode: multiply;]

です。

値に[multiply]を指定している場合は、[background]で指定した色が、Photoshopの「乗算」モードによって背景画像と組み合わされます。

.className .img01 {
	background:#0000cc url(images/img01.jpg) no-repeat;
	background-size:contain;
	background-blend-mode: multiply;
}
.className .img02 {
	background:#0000cc url(images/img02.jpg) no-repeat;
	background-size:contain;
	background-blend-mode: multiply;
}

ページの先頭へ戻る

[参考]いくつか色を乗算してみた結果

さぁ、乗算によって写真にどんな効果が施されるのでしょうか?

なお、今回の検証には「写真AC」さんのフリー写真素材を使用させていただきましたm(__)m

何も乗算していない状態の写真がこちらです。

[background-blend-mode]属性:何も乗算しない状態

ここから、色を乗算で加えてみますね(^^)

まずは、黄色から。

[background-blend-mode]属性:乗算結果:黄色

次に、青系の色を乗算で加えてみました。

[background-blend-mode]属性:乗算結果:青色

最後は赤色です。

[background-blend-mode]属性:乗算結果:赤色

この記事では「乗算」の方法をご紹介してみましたが、[background-blend-mode]属性に他の値を指定することで、Photoshopの別の描画モードを施すことも可能です。

詳細に関しては「Webクリエイターボックス」さんにて紹介されていますので、ご覧になってください。

ページの先頭へ戻る

[注意]IE11とEdgeではブレンドモードが実現できず…

ただし、[background-blend-mode]属性によるPhotoshop風の描画モード指定には、いくつか注意点があります。

まずはIE11やEdgeなどでは適用されないということ。

特にビジネス用のサイトであれば「IEとEdgeは気にしませんよ」という事例は少なく、主要ブラウザで等しく表示される形式が求められるでしょう。

その場合は、[background-blend-mode]による描画モードの指定だけでは十分とは言えないのが現状です(2018年2月時点)。

また、[background-blend-mode]属性はあくまで背景画像に描画モードを指定するものであり、原則的にimgタグによって表示される画像に対する方法ではないものです。

imgタグで指定する画像に描画モードを指定する方法に関しては、また別の機会にということでm(__)m

ページの先頭へ戻る

この記事の感想をお寄せください

[CSSで画像に乗算モードで色を乗せる方法は、実在する!【CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:CSSで画像に乗算モードで色を乗せる方法は、実在する!【CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CS …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.