ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

CSSで画像に乗算やスクリーン等の加工をする(background-blend-mode)

CSSで画像に乗算やスクリーン等の加工ができるプロパティ、background-blend-modeについてまとめてみました。

background-image: url("画像のパス");
background-color:重ねる背景色
background-blend-mode:どうブレンドするかの値;}

 

 

"background-image"

 

"background-color"

画像と背景をblendするプロパティです。


 

normal

何もされない

 

multiply

乗算

 

screen

スクリーン


 

overlay

オーバーレイ

 

darken

暗くする

 

lighten

明るくする


 

color-dodge

多い焼きカラー

 

color-burn

焼きこみカラー

 

hard-light

ハードライト


 

soft-light

ソフトライト

 

difference

差の絶対値

 

exclusion

除外


 

hue

色彩

 

saturation

彩度

 

color

カラー


 

luminosity

輝度