:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > <style> > .grayscale { > /* Firefox 10+, Firefox on Android */ > filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); > /* IE 6-9 */ > filter: gray; > /* Chrome 19+, Safari 6+, Safari 6+ iOS, Opera 15+ */ > -webkit-filter: grayscale(100%); > } > </style> > > 보통은 이런식으로 filter를 사용해서, > 이미지를 흑백 처리 할 수 있는데 > 이게 약간 크로스 브라우징에 문제가 있다. > > 바로 ie10 이상의 익스에서 filter 기능을 지원하지 않는 점인데.. > 메타태그를 사용해서 렌더링 자체를 ie9로 돌린다던지 하는 방법이 있긴 하지만, > 이 이슈 하나때문에 렌더링을 9로 내려 버리기에는, 조금 아쉽다. > > 첨부된 플러그인을 사용하면, 모든 브라우저에서 grayscale 효과를 표현할 수 있다. > 먼저 jquery.gray.js를 임포트시키고, 위의 css처럼 > 적용이 필요한 이미지에 단일 class를 줘서 제어하는게 > 제일 깔끔한 듯 싶다. > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.