filter
filter 속성은 그래픽 효과를 설정합니다.
filter
filter 속성은 그래픽 효과를 설정합니다.
특징 | 설명 |
---|---|
기본 값 | filter : none |
버전 | CSS3 |
사용성 |
정의(Definition)
- filter 속성은 그래픽 효과를 설정합니다.
- hue-rotate()는 0deg~360deg까지 표현합니다.
문법(Syntax)
filter : none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
/* 기본 속성 */
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 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |