w3.css

이미지 효과 추가

이미지에 시각 효과를 추가하는 방법을 알아보자.

CSS 필터

CSS filter속성은 요소에 시각적 효과(예: 흐림 및 채도)를 추가한다.

참고: Internet Explorer, Edge 12 또는 Safari 5.1 이하에서는 필터 속성이 지원되지 않는다.

그레이스케일

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

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

흐림

모든 이미지에 흐림 효과를 적용한다.

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기