CSS ブレンドモード サンプル　　　→→→　ブログ記事

オリジナル写真

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

使い方は、
<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;
	                   /* ↑ mode 指定 */
	background-size: cover;
}
</style>

<div class="img-box color blend"></div>

multiply（乗算）

screen（スクリーン）

overlay（オーバーレイ）

darken（暗く）

lighten（明るく）

color-dodge（覆い焼きカラー）

color-burn（焼き込みカラー）

hard-light（ハードライト）

soft-light（ソフトライト）

difference（差の絶対値）

exclusion（除外）

hue（色相）

saturation（彩度）

color（カラー）

luminosity（輝度）