[CSS] 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

.img1 > div {width: 50%; float: left; transition: all 0.3s ease}
.img1 > div img {display: block; width: 100%; }
.original {background: #162b55 url("https://tistory1.daumcdn.net/tistory/2980691/skin/images/spiderman.jpg"); min-height: 400px; background-size: cover;}
.original span {background: rgba(0,0,0,.8); color: #fff; display: inline-block; padding: 5px 10px; border-radius: 5px; margin: 10px}
.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}

mix-blend-mode

original

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

.img2 > div {width: 50%; float: left; transition: all 0.3s ease;}
.original {position: relative;}
.red {position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; background: rgba(255,0,0,.8); border-radius: 50%; transform: translate(-75%, -50%);}
.blue {position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; background: rgba(0,0,255,.8); border-radius: 50%; transform: translate(-25%, -50%);}

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

.img > div {width: 20%; float: left; transition: all 0.3s ease;}
.img > div img {width: 100%;}
.img > div:hover {filter: none;}
.blur1 {filter: blur(1px)}
.blur2 {filter: blur(3px)}
.blur3 {filter: blur(5px)}
.blur4 {filter: blur(7px)}
.blur5 {filter: blur(10px)}

filter : brightness

.bright1 {filter: brightness(10%);}
.bright2 {filter: brightness(20%);}
.bright3 {filter: brightness(30%);}
.bright4 {filter: brightness(40%);}
.bright5 {filter: brightness(50%);}

filter : contrast

.contrast1 {filter: contrast(10%);}
.contrast2 {filter: contrast(20%);}
.contrast3 {filter: contrast(30%);}
.contrast4 {filter: contrast(40%);}
.contrast5 {filter: contrast(50%);}

filter : grayscale

.grayscale1 {filter: grayscale(100%);}
.grayscale2 {filter: grayscale(80%);}
.grayscale3 {filter: grayscale(60%);}
.grayscale4 {filter: grayscale(40%);}
.grayscale5 {filter: grayscale(20%);}

filter : hue-rotate

.hue1 {filter: hue-rotate(10deg);}
.hue2 {filter: hue-rotate(30deg);}
.hue3 {filter: hue-rotate(60deg);}
.hue4 {filter: hue-rotate(90deg);}
.hue5 {filter: hue-rotate(120deg);}

filter : invert

.invert1 {filter: invert(10%);}
.invert2 {filter: invert(30%);}
.invert3 {filter: invert(60%);}
.invert4 {filter: invert(80%);}
.invert5 {filter: invert(100%);}

filter : opacity

.opacity1 {filter: opacity(10%);}
.opacity2 {filter: opacity(30%);}
.opacity3 {filter: opacity(60%);}
.opacity4 {filter: opacity(80%);}
.opacity5 {filter: opacity(100%);}

filter : saturate

.saturate1 {filter: saturate(10%);}
.saturate2 {filter: saturate(50%);}
.saturate3 {filter: saturate(100%);}
.saturate4 {filter: saturate(200%);}
.saturate5 {filter: saturate(400%);}

filter : sepia

.sepia1 {filter: sepia(10%);}
.sepia2 {filter: sepia(50%);}
.sepia3 {filter: sepia(100%);}
.sepia4 {filter: sepia(200%);}
.sepia5 {filter: sepia(400%);}