Qual é a alternativa do filtro CSS para o Firefox?

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

Pergunta

Eu estou usando CSS Filtros para modificar imagens em tempo real dentro do navegador. Estes funcionam perfeitamente no Internet Explorer, mas não são suportados no Firefox.

Alguém sabe o que o filtro equivalente CSS para estes é para o Firefox? Uma resposta que iria trabalhar cross browser (Safari, WebKit, Firefox, etc.) seria preferível. 

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

Update: Eu sei Filter é uma característica específica IE. Existe algum tipo de equivalente para qualquer um destes que é suportado pelo Firefox?

Foi útil?

Solução

Por favor, verifique o Nihilogic Javascript Efeito Biblioteca :

  • suporta IE e Fx muito bem
  • tem um monte de efeitos

Você pode encontrar muitos outros efeitos no Projetos CVI :

Good Luck

Outras dicas

Você poderia nos dar um exemplo concreto do que exatamente você está tentando fazer? Você provavelmente obter menos "Seu sux Brower" respostas e muito mais "Que tal experimentar esta abordagem diferente?" queridos.

Normalmente CSS é usado para controlar a aparência do conteúdo HTML, não adicionar efeitos ou editar imagens em maneiras inteligentes. O que você está tentando fazer pode ser possível usar javascript, mas um roteiro orientado para o comportamento ainda provavelmente não está muito bem adaptado para o tipo de ajustes que você quer fazer (embora algo como este é uma aventura divertida e muito ineficiente em CSS / JS tomfoolery).

Eu não posso imaginar um cenário quando você necessidade o cliente para realizar ajustes de imagem em tempo real. Você pode modificar imagens do lado do servidor e simplesmente referência a esses versões modificadas com o seu CSS ou, eventualmente, Javascript, dependendo do que você está fazendo exatamente. ImageMagick é uma grande ferramenta pouco de linha de comando para todos os efeitos de imagem que você poderia precisar, e é bastante simples usar por si só ou dentro da linguagem do lado do servidor de sua escolha. Ou se você estiver usando PHP, acredito biblioteca GD do PHP é bastante popular.

Não há equivalentes em outros navegadores. O mais próximo que você pode obter está usando uma biblioteca de gráficos como Canvas e manipular as imagens nele, mas você teria que escrever as manipulações si mesmo e eles exigem JavaScript.

filter é um IE-única característica -. Não está disponível em qualquer outro navegador

SVG filtros aplicados ao conteúdo HTML .

Apenas funciona no Firefox 3.1 e acima, embora eu acho Safari está indo na mesma direção.

Não que eu saiba. Filtro era apenas uma IE coisa e eu não acho que qualquer outro navegador tem acompanhado com funcionalidade semelhante.

O que existe um caso de uso específico que você precisa?

Eu tenho medo que você está praticamente fora de sorte com a maior parte do cross-browser funcionalidade do tipo filter. CSS sozinho não vai permitir que você faça a maioria destas coisas. Por exemplo, não há nenhuma maneira de inverter uma imagem cross-browser apenas usando CSS. Você terá que ter duas cópias diferentes da imagem (um invertido) ou você pode tentar usar Javascript ou talvez fazê-lo de uma forma completamente diferente, mas não há uma solução simples apenas na CSS.

Existem filtros, tais como Gaussiano borrão et ai em SVG, que é suportado de forma nativa excepto pela maioria dos navegadores IE.

experimento mental Pure aqui, você poderia envolver suas imagens em um objeto SVG na mosca com javascript e tentar aplicar filtros a elas.

Eu duvido que isso iria trabalhar para imagens de fundo, embora talvez com um monte de posicionamento inteligente que poderia funcionar.

É pouco provável que seja uma solução realista. Se você não deseja modificar permanentemente as suas imagens de origem, Rudi tem a melhor resposta, utilizando ferramentas do lado do servidor para aplicar transformações em tempo real (ou em cache para o desempenho) será a melhor solução cross browser.

Esta é uma pergunta muito, muito antigo, mas css actualiza ir agora filtros de apoio. Leia mais sobre ele em

https://developer.mozilla.org/en-US/ docs / web / CSS / filtro

Sintaxe

Com uma função, use o seguinte: 

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

Para uma referência a um elemento SVG, utilize o seguinte: 

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

Não é verdade, e espero que nunca haverá. Não é uma característica CSS padrão web para a razão que você está usando CSS para formatar a página, não o próprio navegador. O dia em que outros web designers e desenvolvedores pensam que deve denominar meu navegador como eles desejam e são, em seguida, fazê-lo é o dia que eu parar de visitar suas páginas (e digo isso como um web cara front-end).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top