CSS Types

CSS Types

Editing

<filter-function>

이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.

관련 함수

  • blur()가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.
  • brightness()이미지의 밝기를 조절한다.
  • contrast()이미지의 색상 대비를 조절한다.
  • drop-shadow()그림자를 생성한다.
  • grayscale()이미지를 흑백으로 변환한다.
  • hue-rotate()이미지의 전체 색조를 조절한다.
  • invert()이미지의 색상을 반전한다.
  • opacity()이미지의 투명도를 조절한다.
  • saturate()이미지의 채도를 조절한다.
  • sepia()이미지에 세피아 톤을 적용한다.

관련 속성들

  • backdrop-filter색의 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있다. 적용 요소 뒤에 있는 모든 요소에 적용되므로 효과를 보려면 해당 요소의 배경을 투명하게 만들어야 한다.
  • filter요소에게 시각적 효과를 정의한다.

버전 명세

Modules
Module NameStatusSummary
Filter Effect Module Level 1편집자 초안

필터 효과는 화면에 표시되기 전에 요소의 렌더링을 처리하는 방식이다.


Last review date: 2022-5-30

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com