[CSS] filter

filter

filter 속성은 그래픽 효과를 설정합니다.

filter

filter 속성은 그래픽 효과를 설정합니다.

특징	설명
기본 값	filter : none
버전	CSS3
사용성

정의(Definition)

filter 속성은 그래픽 효과를 설정합니다.
hue-rotate()는 0deg~360deg까지 표현합니다.

문법(Syntax)

/* 기본 속성 */
filter : none;
filter : blur();
filter : brightness();
filter : contrast();
filter : drop-shadow();
filter : grayscale();
filter : hue-rotate();
filter : invert();
filter : opacity();
filter : saturate();
filter : sepia();
filter : url();

/* 다중 속성 */
filter : hue-rotate(20deg) contrast(50%);

속성(Property)

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

예제1(Sample)

blur의 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: blur(0)}
img:nth-child(2) {filter: blur(1px)}
img:nth-child(3) {filter: blur(3px)}
img:nth-child(4) {filter: blur(5px)}
img:nth-child(5) {filter: blur(10px)}

//Javascript none

예제2(Sample)

brightness의 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: brightness(100%)}
img:nth-child(2) {filter: brightness(75%)}
img:nth-child(3) {filter: brightness(50%)}
img:nth-child(4) {filter: brightness(25%)}
img:nth-child(5) {filter: brightness(0%)}

//Javascript none

예제3(Sample)

contrast 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: contrast(100%)}
img:nth-child(2) {filter: contrast(75%)}
img:nth-child(3) {filter: contrast(50%)}
img:nth-child(4) {filter: contrast(25%)}
img:nth-child(5) {filter: contrast(0%)}

//Javascript none

예제4(Sample)

grayscale 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: grayscale(0%)}
img:nth-child(2) {filter: grayscale(25%)}
img:nth-child(3) {filter: grayscale(50%)}
img:nth-child(4) {filter: grayscale(75%)}
img:nth-child(5) {filter: grayscale(100%)}

//Javascript none

예제5(Sample)

hue-rotate 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: hue-rotate(0deg)}
img:nth-child(2) {filter: hue-rotate(30deg)}
img:nth-child(3) {filter: hue-rotate(60deg)}
img:nth-child(4) {filter: hue-rotate(90deg)}
img:nth-child(5) {filter: hue-rotate(12deg)}

//Javascript none

예제6(Sample)

invert 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: invert(0%)}
img:nth-child(2) {filter: invert(25%)}
img:nth-child(3) {filter: invert(50%)}
img:nth-child(4) {filter: invert(75%)}
img:nth-child(5) {filter: invert(100%)}

//Javascript none

예제7(Sample)

opacity 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: opacity(100%)}
img:nth-child(2) {filter: opacity(75%)}
img:nth-child(3) {filter: opacity(50%)}
img:nth-child(4) {filter: opacity(25%)}
img:nth-child(5) {filter: opacity(0%)}

//Javascript none

예제8(Sample)

saturate 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: saturate(0%)}
img:nth-child(2) {filter: saturate(50%)}
img:nth-child(3) {filter: saturate(100%)}
img:nth-child(4) {filter: saturate(150%)}
img:nth-child(5) {filter: saturate(200%)}

//Javascript none

예제9(Sample)

sepia 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: sepia(0%)}
img:nth-child(2) {filter: sepia(20%)}
img:nth-child(3) {filter: sepia(60%)}
img:nth-child(4) {filter: sepia(100%)}
img:nth-child(5) {filter: sepia(140%)}

//Javascript none

예제10(Sample)

drop-shadow 이미지 효과 예제입니다.

효과 없애기 효과 주기

HTML

CSS

SCRIPT

<div class="filter-box">
    <div class="box">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
        <img src="../images/hover04.jpg" alt="fiter 효과">
    </div>
</div>

img:nth-child(1) {filter: drop-shadow(0px 0px 0px black)}
img:nth-child(2) {filter: drop-shadow(2px 2px 2px black)}
img:nth-child(3) {filter: drop-shadow(4px 4px 4px black)}
img:nth-child(4) {filter: drop-shadow(6px 6px 6px black)}
img:nth-child(5) {filter: drop-shadow(8px 8px 8px black)}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
filter	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능

Webstoryboy

Category

Explanation

[CSS] filter

filter

filter

정의(Definition)

문법(Syntax)

속성(Property)

예제1(Sample)

blur의 이미지 효과 예제입니다.

예제2(Sample)

brightness의 이미지 효과 예제입니다.

예제3(Sample)

contrast 이미지 효과 예제입니다.

예제4(Sample)

grayscale 이미지 효과 예제입니다.

예제5(Sample)

hue-rotate 이미지 효과 예제입니다.

예제6(Sample)

invert 이미지 효과 예제입니다.

예제7(Sample)

opacity 이미지 효과 예제입니다.

예제8(Sample)

saturate 이미지 효과 예제입니다.

예제9(Sample)

sepia 이미지 효과 예제입니다.

예제10(Sample)

drop-shadow 이미지 효과 예제입니다.

호환성(Compatibility)

참고 사이트(Reference)

더보기

티스토리툴바

[CSS] filter

filter

filter

정의(Definition)

문법(Syntax)

속성(Property)

예제1(Sample)

blur의 이미지 효과 예제입니다.

예제2(Sample)

brightness의 이미지 효과 예제입니다.

예제3(Sample)

contrast 이미지 효과 예제입니다.

예제4(Sample)

grayscale 이미지 효과 예제입니다.

예제5(Sample)

hue-rotate 이미지 효과 예제입니다.

예제6(Sample)

invert 이미지 효과 예제입니다.

예제7(Sample)

opacity 이미지 효과 예제입니다.

예제8(Sample)

saturate 이미지 효과 예제입니다.

예제9(Sample)

sepia 이미지 효과 예제입니다.

예제10(Sample)

drop-shadow 이미지 효과 예제입니다.

호환성(Compatibility)

참고 사이트(Reference)

CSS Related Articles

더보기

티스토리툴바