CSS:filter

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

CSS : filter

filter속성은 요소 (종종 )에 대한 시각 효과 (예 : 흐림 및 채도)를 정의합니다.

이전 버전의 Internet Explorer (4.0에서 8.0)에서는 비표준 필터 속성이 지원되지 않습니다. IE8 이상에서 지원이 필요할 때 주로 불투명도로 사용되었습니다 .

IE13이상부터 지원합니다.

속성

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

• none :기본값. 효과 없음
• blur(px) :이미지에 흐릿한 효과를 부여한다. 가치가 크면 더 흐릿해질 것이다.
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 회색으로 만든다.
• brightness(%) :이미지의 밝기를 조절한다.
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 회색으로 만든다.
• contrast(%) :이미지의 대비를 조정하십시오.
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 회색으로 만든다.
• drop-shadow(h-shadow v-shadow blur spread color) :이미지에 드롭 섀도 효과를 적용하십시오.
• grayscale(%) :이미지를 그레이스케일로 변환
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 회색으로 만든다.
• hue-rotate(deg) :영상에 색조 회전을 적용하십시오. 이 값은 영상 샘플이 조정될 색상 원 주위의 도 수를 정의한다. 0deg는 기본값이며 원본 이미지를 나타낸다.
• invert(%) :이미지에서 샘플을 반전시킨다.
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 반전시킬 것이다.
• opacity(%) :이미지의 불투명도 수준을 설정하십시오. 불투명도 수준은 다음과 같은 투명도 수준을 설명한다.
  • 0%는 완전히 투명하다.
  • 100% (1)은 기본값이며 원본 이미지를 나타낸다(투명하지 않음).
• saturate(%) :이미지를 포화시키다.
  • 0%(0)는 이미지를 완전히 불포화시킨다.
  • 100%는 기본값이며 원본 이미지를 나타낸다.
  • 100%를 초과하는 값은 초포화 결과를 제공한다.
• sepia(%) :이미지를 세피아로 변환
  • 0%(0)는 기본값이며 원본 이미지를 나타낸다.
  • 100%는 이미지를 완전히 세피아로 만들 것이다.
• url() :URL() 함수는 SVG 필터를 지정하는 XML 파일의 위치를 가지며, 특정 필터 요소에 대한 앵커를 포함할 수 있다. 예:filter: url(svg-url#element-id)
• initial :이 속성을 기본값으로 설정하십시오.
• inherit :이 속성을 상위 요소로부터 상속한다.