CSS filter 속성 정리

 

 

filter 전체 속성 (이미지에 그래픽 효과 적용)

filter : none; (효과 없음)
filter : blur(); (블러 효과)
filter : brightness(); (밝고 어두움 정도)
filter : contrast(); (대비)
filter : drop-shadow(); (그림자)
filter : grayscale(); (그레이스케일)
filter : hue-rotate( deg); (색조)
filter : invert(); (반전)
filter : opacity(); (투명도)
filter : saturate(); (채도)
filter : sepia(); (세피아 효과)
filter : url(); (이미지 경로)
· 다중 효과 가능 (filter: grayscale(0.5) blur(10px);)

 

 

 

 

 

---

 

 

 

 

 

예제 html

<div class="box">
<img src="./images/background.jpg" alt="하늘">
</div>

 

예제 css

.box {
  width: 300px;
  padding: 50px;
  margin: 50px auto;
  background-color: #fff;
  border: 5px solid #eee;
}
.box > img {
  display: block;
  width: 300px;
}

 

 

 

 

결과 이미지 왼쪽 부모에 적용, 오른쪽 이미지 자체에 적용

 

 

 

filter : none;   기본값

filter: none; 기본값 효과

 

 

 

 

 

 

filter :  blur(10px); 

- px값이 높을수록 흐려짐

filter: blur(10px);

 

 

 

 

 

 

filter :  brightness(50%);

- 0~1사이의 소숫점. 값이 1에 가까울수록 어두워짐

- 퍼센트로 할 시 100%에 가까울수록 어두워짐

 

filter: brightness(50%);

 

 

 

 

 

 

filter :  contrast(50%); 

- 0~1사이의 소숫점. 값이 1에 가까울수록 회색

- 퍼센트로 할 시 100%에 가까울수록 회색

filter: contrast(50%);

 

 

 

 

 

 

filter :  drop-shadow(6px 6px 10px #888); 

- drop-shadow(x축, y축, 번짐정도, 색상)

 

filter: drop-shadow(6px 6px 10px #888);

 

 

 

 

 

 

filter :  grayscale(100%); 

- 0~1사이의 소숫점. 값이 1에 가까울수록 흑백

- 퍼센트로 할 시 100%에 가까울수록 흑백

왼쪽 filter: grayscale(100%); 오른쪽 filter: grayscale(50%);

 

 

 

 

 

filter :  hue-rotate(180deg); 

- 색조 조절

- 각도 값 조절하는 deg 사용

왼쪽 filter: grayscale(45deg); 오른쪽 filter: grayscale(180deg);

 

 

 

 

 

filter :  invert(100%);

- 0~1사이의 소숫점. 값이 1에 가까울수록 반전효과 큼

- 퍼센트로 할 시 100%에 가까울수록 반전효과 큼

filter: invert(100%);

 

 

 

 

 

 

filter :  opacity(0.5); 

- 0~1사이의 소숫점. 값이 0에 가까울수록 투명도

- 퍼센트로 할 시 0%에 가까울수록 투명해짐

filter: opacity(0.5);

 

 

 

 

 

 

filter :  sepia(100%);

- 0~1사이의 소숫점. 값이 0에 가까울수록 세피아 효과

- 퍼센트로 할 시 0%에 가까울수록 세피아 효과

filter: sepia(100%);

 

 

 

 

 

 

filter :  saturate(100%); 

- 0~1사이의 소숫점. 값이 1 이상일수록 채도가 높아지고, 1 이하일수록 채도 낮아짐

- 퍼센트로 할 시 100% 이상일수록 채도가 높아지고, 100% 이하일수록 채도 낮아짐 

왼쪽 filter: saturate(100%); 오른쪽 filter: saturate(40%);