방법 - 이미지 효과 추가
이미지에 시각 효과를 추가하는 방법을 알아보세요.
이미지 필터
CSS 필터
CSS filter
속성은 요소에 시각적 효과(예: 흐림 및 채도)를 추가합니다.
참고: 필터 속성은 Internet Explorer, Edge 12 또는 Safari 5.1 및 이전 버전에서 지원되지 않습니다.
그레이스케일 예
모든 이미지의 색상을 흑백(100% 회색)으로 변경:
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
흐림 예
모든 이미지에 흐림 효과 적용:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
CSS 필터 에 대해 자세히 알아보려면 CSS 필터 속성 으로 이동하십시오 .