filter 속성

filter 속성은 배경 이미지에 특정 예술적 스타일 또는 필터를 적용합니다. 이 속성은 filter 함수 또는 none (선택된 필터 취소)로 형성되는 예술적 스타일의 이름을 값으로 받을 수 있습니다.

구문

선택자 {
	filter: 예술적 스타일 또는 none;
}

예시

이미지에 흑백 필터를 적용하고 마우스를 올리면 취소해 봅시다:

<div id="elem"></div>

#elem {
	filter: grayscale(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
#elem:hover {
	filter: none;
}

함께 보기

속성 background,
배경에 대한 단축 속성
함수 blur,
배경을 흐리게 하는 함수
함수 brightness,
배경의 밝기를 설정하는 함수
함수 contrast,
배경의 대비를 설정하는 함수
함수 drop-shadow,
배경에 그림자를 설정하는 함수
함수 hue-rotate,
배경의 색조를 설정하는 함수
함수 invert,
배경 색상을 반전시키는 함수
함수 opacity,
배경의 투명도를 설정하는 함수
함수 sepia,
배경을 세피아로 변환하는 함수