색의 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있다. 적용 요소 뒤에 있는 모든 요소에 적용되므로 효과를 보려면 해당 요소의 배경을 투명하게 만들어야 한다.
none | <filter-value-list>
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
filter
속성으로 효과를 지정하기 위해 설정된 값 목록을 나타낸다.
[ <filter-function> | <url> ]+
한 개 이상의 관련 함수를 사용하여 적용할 수 있다. 한 개 이상의 함수는 공백으로 구분하여 작성한다.
이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
filter 효과를 적용하지 않는다.
backdrop-filter: blur(10px);
Modules | ||
---|---|---|
Module Name | Status | Summary |
Filter Effect Module Level 2 | Last review date: 2022-6-16 |