background-blend-mode
background-blend-modeプロパティは、背景色と背景画像をブレンドするためのものです。

いつも写真の加工は、Photoshopなどで加工しますが、
このプロパティを使用すればCSS だけで手軽に再現できます。
効果を切り替えたいと思った時にすぐにモードを変えられるのもGOOD！！

サンプル

#blend {
	display: inline-block;
	margin: 2em;
	width: 400px;
	height: 400px;
	background-size: 400px 400px;
	background-repeat: no-repeat;
	background-color:#ブレンドしたい背景色;
	background-image: url(ブレンドしたい画像.png);
}

.normal {
	-webkit-background-blend-mode: normal;
	background-blend-mode: normal;

}

normal

ブレンドの種類は下記の通りです
normal （ブレンドなし）
multiply（乗算）
screen（スクリーン）
overlay（オーバーレイ）
darken（暗くする）
lighten（明るくする）
color-dodge（ごまかす）
color-burn（覆い焼き）
hard-light（ハードライト）
soft-light（ソフトライト）
difference（差異）
exclusion（除外）
hue（色合い）
saturation（彩度）
color（色相）
luminosity（輝度）

とても簡単にできるのでWEBデザインの際にはぜひ試して見てください！

関連ニュース
・HTML・CSSの基礎
・jquery商品スライダーの設置方法
・CSSで透明度設定
・jqueryとは
・ハーフトーン（PHOTOSHOP）
・レトロな写真加工（PHOTOSHOP）