What's CSS 필터를 위한 대안 Firefox?

StackOverflow https://stackoverflow.com/questions/156116

문제

나 CSS 를 사용하여 필터를 수정하는 이미지 내에서 실시간으로 브라우저입니다.이러한 작업을 완벽하게 Internet Explorer 에서만 지원되지 않습니다 Firefox.

사람이 무엇을 알기에 해당한 이들에 대한 Firefox?답 작업 크로스 브라우저(사파리,WebKit,파이어폭스 등) 것이 좋습니다.

<style type="text/css">
    .CSSClassName {filter:Invert;}
    .CSSClassName {filter:Xray;}
    .CSSClassName {filter:Gray;}
    .CSSClassName {filter:FlipV;}
</style>

업데이트:내가 알고 있는 필터입니다 즉 특정 기능입니다.거의 모든 종류의 동일 모든 이들의 의해 지원되는 Firefox?

도움이 되었습니까?

해결책

확인하십시오 Nihilogic JavaScript 이미지 효과 라이브러리:

  • IE와 FX를 꽤 잘 지원합니다
  • 많은 효과가 있습니다

당신은 다른 많은 효과를 찾을 수 있습니다 CVI 프로젝트:

  • 그들은 또한 JS 기반입니다
  • 거기에 실험실

행운을 빕니다

다른 팁

인할 수 있다의 구체적인 예를 정확히 무엇을 하려고 시도하고 있는?당신은 아마도 몇몇 "당신의 브라우저 sux" 응답을 더 "어떻게 노력에 대해 이것은 다른 접근법?" 다.

일반적으로 CSS 을 제어하는 데 사용되는 모양과 느낌의 HTML 내용을 추가하지 효과 또는 이미지를 편집한다.무엇을 하려고 시도하고 있는 것이 가능할 수 있습을 사용하여 자바스크립트,하지만 행동을 지향하는 스크립트는 여전히 아마 매우 적합한 종류의 조정를 하고 싶(지만 뭔가 이 는 재미 있고 매우 비효율적인 모험에서 CSS/JS 어리 석음).

내가 상상할 수 없는 시나리오를 때 당신 요 클라이언트를 수행하는 이미지를 조정합니다.수정할 수 있습니지 server-side 그 참조는 단순히 이러한 수정 버전으로 CSS 또는 가능하게 자바스크립트,하는 것에 따라 정확하게 수행하. ImageMagick 작 명령행 도구를 위해 모든 이미지 효과 당신이 이제까지,필요하고 사용하기 매우 간단하여 자체 또는 내 서버 측의 언어는 당신의 선택입니다.거나 사용하는 경우 PHP,믿 PHP GD 라이브러리 은 꽤 인기가 있습니다.

다른 브라우저에는 동등한 부분이 없습니다. 가장 가까운 것은 캔버스와 같은 그래픽 라이브러리를 사용하고 이미지를 조작하는 것이지만, 조작을 직접 작성해야하며 JavaScript가 필요합니다.

filter IE 전용 기능입니다. 다른 브라우저에서는 사용할 수 없습니다.

SVG 필터는 HTML 컨텐츠에 적용됩니다.

Safari가 같은 방향으로 향하고 있다고 생각하지만 Firefox 3.1 이상에서만 작동합니다.

내가 아는 것은 없다. 필터는 IE 전용이었고 다른 브라우저는 비슷한 기능을 따랐다 고 생각하지 않습니다.

필요한 특정 사용 사례는 무엇입니까?

나는 당신이 대부분의 크로스 브라우저와 함께 운이 좋지 않은 것을 두려워합니다. filter-유형 기능. CSS만으로도 이러한 일을 대부분 할 수 없습니다. 예를 들어 CSS를 사용하는 이미지 크로스 브라우저를 반전시키는 방법이 없습니다. 이미지의 두 개의 다른 사본 (하나의 반전)이 있거나 JavaScript를 사용하거나 완전히 다른 방식으로 갈 수 있지만 CSS에는 간단한 솔루션이 없습니다.

필터가 있는 등 Gaussian Blur et al SVG 에서는 기본적으로 지원하여 대부분의 브라우저를 제외하고 IE.

순수한 생각 실험을 여기에서,당신은 수 있는 포장의 이미지를 SVG 개체 즉석에서 javascript 를 적용하려고 시도하는 필터를니다.

내가 이것을 의심하는 것 작업에 대한 배경 이미지는,하지만 아마도 많이와 영리한 위치는 작동할 수 있었습니다.

이 될 것이 현실적인 솔루션입니다.당신이 원하지 않는 경우를 영구적으로 수정의 원본 이미지 Rudi 는 최고의 응답을 사용하여,서버의 측면 도구를 변환을 적용하고 즉석에서(또는 캐시한 성능)이 될 것이 최고의 크로스 브라우저 솔루션입니다.

이것은 매우 오래된 질문이지만 CSS는 이제 필터를 지원하도록 업데이트되었습니다. 그것에 대해 자세히 알아보십시오

https://developer.mozilla.org/en-us/docs/web/css/filter

통사론

함수를 사용하면 다음을 사용하십시오.

filter: <filter-function> [<filter-function>]* | none

SVG 요소에 대한 참조하려면 다음을 사용하십시오.

filter: url(svg-url#element-id)

실제로는 아니며, 바라건대는 결코 없을 것입니다. CSS를 사용하여 브라우저 자체가 아닌 웹 페이지를 포맷하기 때문에 웹 표준 CSS 기능이 아닙니다. 다른 웹 디자이너와 개발자가 내 브라우저를 원하는 방식으로 스타일링해야한다고 생각하는 날은 내가 자신의 페이지 방문을 중단하는 날입니다 (그리고 나는 이것을 프론트 엔드 웹 가이라고 말합니다).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top