晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

CSSのブレンドモード"background-blend-mode"を使うと写真にカラーフィルタをかけたような色の加工ができる。

CSSの"background-blend-mode"を使うと写真にカラーフィルタをかけたような色の加工ができる。

以下のWebページを参考にした。

使い方は、<div>で写真を入れるボックスを作成し、backgroundプロパティでオリジナル写真とカラーフィルタの色指定をして、background-blend-modeプロパティでブレンドモードを指定する。

<style>
.img-box {
	width: 300px;
	height: 400px;
	margin: 0;
	padding: 0;
	display: block;
}
.color {
	background: #0bd url(オリジナル写真.jpg) no-repeat; /* 色指定 */
}
.blend {
	background-blend-mode: multiply; /* blend-mode 指定 */
	background-size: cover;
}
</style>
<div class="img-box color blend"></div>

★ 実際に作成したブレンドモードのサンプルページが以下。

上記サンプルページの画像抜粋。↓

■ オリジナル写真

f:id:art2nd:20190219135408j:plain

■ multiply(乗算)

f:id:art2nd:20190219135421j:plain

■ lighten(明るく)

f:id:art2nd:20190219135455j:plain

■ color-burn(焼き込みカラー)

f:id:art2nd:20190219135510j:plain

■ luminosity(輝度)

f:id:art2nd:20190219135520j:plain

■ difference(差の絶対値)

f:id:art2nd:20190219135531j:plain