크로스 브라우저 이미지 그레이 스케일 CSS

그레이 스케일 효과는 파이어 폭스에서 잘 작동하지 않으므로 다른 방법을 사용하고 있습니다.크로스 브라우저 이미지 그레이 스케일 CSS

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"); /* Firefox 10+, Firefox on Android */

하지만이 CSS를 적용한 후 firefox show me error는 이미지를로드 할 수 없습니다. 혁명 슬라이더에서이 효과를 적용합니다. 이미지의 수는 아무 곳에 나있을 수 있습니다.

출처

2014-06-14 Tanuj Verma

당신이를 만들 수 https://developer.mozilla.org/en-US/docs/Web/CSS/filter : 여기

filter: grayscale(100%);

는 참조 용으로 자신의 사이트에 대한 링크입니다 깡깡이? –

실제로 나는 이것을 WordPress의 회전 슬라이더에서 테스트하고 있습니다. –

이 오래지만 저도 같은 문제를 겪고과 개발자 사이트에 그것을 발견하고는 나를 위해 일한 :

출처

2015-10-26 04:30:10 tiaNaturally

크로스 브라우저 이미지 그레이 스케일 CSS

답변

관련 문제