filter 속성

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

구문

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

예시

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

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

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

Результат:

함께 보기