[image] CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)

1. 이미지 흑백 효과
2. 이미지 흐림 효과

이미지 흑백 효과

 

<style>

img {

  max-width:100%;

}

.hz {

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

  filter: grayscale(100%);

}

</style>

<img src="https://source.unsplash.com/random" alt="랜덤이미지">

<img src="https://source.unsplash.com/random" alt="랜덤이미지" class="hz">

결과보기

이미지 흐림 효과

 

<style>

img {

  max-width:100%;

}

.hz {

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

  filter: blur(5px);

}

</style>

<img src="https://source.unsplash.com/random" alt="랜덤이미지">

<img src="https://source.unsplash.com/random" alt="랜덤이미지" class="hz">

결과보기