[CSS] Filter (이미지 필터)

Filter

• 요소에 (이미지) 필터효과를 적용하기 위해 사용한다.

• 기본값 : none

• 속성구조

  • [x] : 단일 값 적용
    • 사용 가능한 속성값
      • none : 필터를 적용하지 않는다.
  • [x_....] : 띄우기로 구분하여 여러값 적용
    • 사용 가능한 속성
      • filter용 함수

• 속성값

  • blur(x) : x[크기] 만큼 흐리게 한다.
  • brightness(x) : 0 이상의 실수(혹은 0% 이상)로, 밝기를 지정한다. 0 일때 완전히 어두우며, 1(100%)일때 본래 밝기를 가진다.
  • contrast(x) : 0 이상의 실수(혹은 0% 이상)로, 대비를 지정한다. 값이 낮을 수록 저대비, 높을수록 고대비이며, 1 (100%)일때 본래 대비를 가진다.
  • grayscale(x) : 0 이상 1이하의 실수 (혹은 0% 이상 100% 이하)로, 이미지를 흑백으로 만든다. 0 일때 본래이미지이고, 1 (혹은 100%)일때 완전히 흑백이 된다.
  • invert(x) : 0 이상 1이하의 실수(혹은 0% 이상 100% 이하)로, 이미지를 반전시킨다. 0 일때 본래 이미지이고, 1 (혹은 100%)일때 완전히 반전된다.
  • opacity(x) : 0 이상 1 이하의 실수(혹은 0% 이상 100% 이하)로, 투명도를 지정한다. 0 일때 완전히 투명하고, 1 일때 완전히 불투명하다.
  • saturate(x) : 0 이상의 실수(혹은 0% 이상)로, 채도를 지정한다. 값이 낮을 수록 저채도, 높을수록 고채도이며, 1 (100%)일때 존래 채도를 가진다.

• 형식

  [Tag] or [.class] or [#id] {
     /* HTML의 img태그 또는 background-image가 먼저 선언*/
      filter : blur([크기]);
  }