이미지에 시각 효과를 추가하는 방법에 대해 알아보십시오.
CSS 필터
는 CSS filter 속성이 추가 비주얼 효과 (like blur and saturation) 요소로한다.
참고 : 필터 속성은 인터넷 익스플로러, 에지 (12), 또는 Safari 5.1 및 이전 버전에서는 지원되지 않습니다.
그레이 스케일 예
흑백으로 모든 이미지의 색상 변경 (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
블러 예
모든 이미지에 흐림 효과를 적용 :
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
우리로 이동 CSS filter Property CSS 필터에 대한 자세한 내용을 보려면.