BLEND EFFECT

Background-blend-mode

normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity

Porperty	Description
normal	배경색의 기본 값을 정의합니다.
multiply	더 어두운 색으로 변경됩니다.
screen	더 밝은 색으로 변경됩니다.
overlay	원래 색상의 농도와 밝기를 변경합니다.
darken	어두운 색으로 변경됩니다.
lighten	밝은 색으로 변경됩니다.
color-dodge	기본 색상을 밝게 합니다.
saturation	채도의 변화로 색상이 변경됩니다.
color	색을 통해 색상을 변경합니다.
luminosity	밝기를/ 통해 색상을 변경합니다.

original

multiply

screen

overlay

darken

lighten

color-dodge

saturation

color

luminosity

.original {background: #a18cd1 url(img/blend.jpg); min-height: 400px; background-size: cover;}
.original.multiply {background-blend-mode: multiply;}
.original.screen {background-blend-mode: screen;}
.original.overlay {background-blend-mode: overlay;}
.original.darken {background-blend-mode: darken;}
.original.lighten {background-blend-mode: lighten;}
.original.color-dodge {background-blend-mode: color-dodge;}
.original.saturation {background-blend-mode: saturation;}
.original.color {background-blend-mode: color;}
.original.luminosity {background-blend-mode: luminosity;}
.original:hover {background-blend-mode: normal;}

Mix-blend-mode

original

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

filter

filter : none | blur() | brihgtness() | contrast | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

Porperty	Description
none	이미지의 아무런 효과를 주지 않습니다.
blur(px)	이미지의 블러 효과를 설정합니다.
brihgtness(%)	이미지의 밝고 어두움 정도를 설정합니다.
contrast(%)	이미지의 대비를 설정합니다.
drop-shadow()	이미지의 그림자를 설정합니다.
grayscale(%)	이미지의 그레이스케일을 설정합니다.
hue-ratate(deg)	이미지의 색조를 설정합니다.
invert(%)	이미지의 반전색상을 설정합니다.
opacity(%)	이미지의 투명도를 설정합니다.
saturate(%)	이미지의 채도를 설정합니다.
sepia(%)	이미지의 세피아 효과를 설정합니다.
url()	이미지의 경로를 설정합니다.

filter : blur

filter : brightness

filter : contrast

filter : grayscale

filter : hue-rotate

filter : invert

filter : opacity

filter : saturate

filter : sepia