작성 방법: 이미지 효과 추가

이미지에 시각적 효과를 추가하는 방법을 배우십시오.

CSS 필터

CSS filter 속성이 요소에 시각적 효과(예: 흐림과 saturation)를 추가합니다.

주의:Internet Explorer, Edge 12 또는 Safari 5.1 및 이전 버전은 지원하지 않습니다 filter 속성.

그레이스케일 예제

모든 이미지의 색상을 흑백으로 변경합니다 (100% 회색):

원본 이미지

그레이스케일 (100%)

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

직접 시도해 보세요

배경 흐림 예제

모든 이미지에 흐림 효과 적용하십시오：

원본 이미지

배경 흐림 처리 (5픽셀)

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

직접 시도해 보세요

관련 페이지

참조 가이드:CSS filter 속성