[JQUERY] IE에서도 이미지 흑백처리하기 CSS + Grayscale.js

웹 작업 시 이미지 회색처리를 해본 사람들은 알겠지만 IE에서는 filter: grayscale(100%)가 되지 않는다.ㄱㅡ
해서 열심히 구글링해서 방법을 찾았다. 검색할때마다 앞서 나간 선조님들께 감사드린다.ㅜ

내가 사용한건 Cross-Browser Grayscale image example using CSS3 + JS 이다.


* 1버전

Cross-Browser Grayscale image example using CSS3 + JS by Streamline

* 2버전

Cross-Browser Grayscale image example using CSS3 + JS v2.0 with browser feature detection using Modernizr by Streamline

버전이 2가지가 있는데 내가 했던 1버전 사용법으로 올린다.

cross-browser-grayscale-ie11.zip

0.25MB

파일은 올려둔 사이트에가서 받아도 되고 위의 파일을 받아도 된다.(어차피 거기서 받아온거ㅋ)

* script 삽입

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript' src='js/grayscale.js'></script>
<script type='text/javascript' src="js/functions.js"></script>

* css

img {
    filter: url('../js/filters.svg#grayscale'); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Webkit Nightlies, Google Chrome Canary and Microsoft Edge*/
}
img:hover {
    filter: none; /* Applies to FF + IE */
    -webkit-filter: grayscale(0);
}

사이트에 들어가면 이거저거 많은 내용들이 있는데 소스를 삽입하고 css만 잘 넣어주면 ie에서도 흑백필터가 작동한다.