css로 이미지 흑백으로 바꿀 때 IE 안먹는 문제 해결법

css 중 filter를 사용하면 img를 흑백으로 바꾸거나 어둡게 할 수 있다.

 

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

 

문제는 IE에서는 안먹는 다는 것. IE9은 됐는데 IE10, IE11은 적용 불가.

 

 

cross-browser-grayscale-ie11.zip

0.25MB

IE11을 위해 js로 filter를 처리할 수 있다.

  

첨부파일의 js를 받은 뒤 

 

헤더영역에 j쿼리,  grayscale.js, funtions.jp를 불러오기만 하면 된다.