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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

CSSで画像に乗算モードで色を乗せる方法は、実在する!【CSS3】

2018.2.13 2019.1.15

CSSで画像に乗算モードで色を乗せる方法は、実在する!【CSS3】
Web制作 0 0

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

企業のWeb担当者さん向け!メルマガ購読はこちら

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「無料でお仕事を依頼する&お受けするときに気をつけたい事」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

メルマガをご購読いただいた方には、妙高Web屋作成の無料レポート「ホントは公表したくない!受注につなげるホームページ作りの話」をプレゼントいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ