1. 홈
  2. 질의 응답
  3. css를 통해 크롬의 그레이 스케일

css를 통해 크롬의 그레이 스케일

2012-01-15 4 views

답변

7

지원은 너무 -webkit-필터는 현재 버전 19.0.1084.46

에서 추가되었습니다

출처

2012-05-28 08:22:26 hjindal

+0

대단히 고맙습니다. –

2

크롬

의 최신 버전에서 작동하지 않습니다

하지만, 크롬 18 (올해 말 출시) css filters을 지원합니다. SVG 필터는 Firefox에서만 지원됩니다. 당신은 일관된 캔버스 + 자바 스크립트 솔루션을 찾을 수 있어야합니다.

EDIT : 대체 해결책은 Erik Dahlström의 게시물을 참조하십시오.

출처

2012-01-16 02:06:04 bennedich

+1

SVG 필터는 SVG 컨텐츠의 모든 브라우저에서 지원됩니다 (IE10도 포함). 그러나 현재 Firefox는 HTML 콘텐츠에서 직접 svg 필터를 사용할 수있는 유일한 브라우저입니다. –

+0

사실, 나는 문맥에 대해 더 구체적 이어야만했다. – bennedich

5

다른 해결책은 간접적 인 수준의 svg입니다.

기본적으로 <img src="wrapper.svg"/> 여기서 wrapper.svg는 svg에 svg 필터를 적용하고 svg에는 래스터 이미지를 가리키는 이미지 요소가 있습니다. Opera, Chrome, Firefox 및 아마 IE10 (테스트되지 않음)에서 작동합니다.

여기에 demo이 있습니다. encodeURIComponent 먼저 URL을 전달할 수 있습니다. 스크립트가 작동하는 것으로 매개 변수를 전달하기 위해서는 매개 변수가 < img> 요소 나 CSS 배경 이미지에서 사용해야하는 경우 서버에 svg 파일을 생성해야합니다. 그레이 스케일 (1) 작동하고있는이 웹킷을위한 SVG에 비해 더 접근 용이하다 .. : 웹킷의 기본 CSS 필터

출처

2012-01-17 14:11:15

+1

와우, 정말 맛있습니다! 그냥 위로 머리; 나는 그것을 삽입했고 두 가지 사소한 조정을해야했다. 대소 문자를 구분하는 URL에'.toLowerCase()'를 제거하고'arr'은 객체'{}'여야한다. – bennedich

+0

이미지를 가리키면 그레이 스케일 효과가 필요합니다. 해결책은 가능한가요? – alex

+0

고맙습니다. 위의 예제를 제안 된 수정 사항으로 업데이트하고 애니메이션 예제를 추가했습니다. http : //dahlström.net/svg/filters/make-grayscale-filter-on-hover.svg#url=boston.jpg (worked 오페라와 파이어 폭스에서 괜찮 았어. 크롬은 mouseout 이벤트를 얻지 못하는 것 같았는데, 이것은 독립형으로로드되었을 때만 가능했으며, IE는 SVG 애니메이션을 지원하지 않는다. 스크립트를 사용하여 애니메이션을 만들 수도 있습니다. –

관련 문제

 관련 문제