¿Cuál es la alternativa del filtro CSS para Firefox?

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

Pregunta

Estoy usando Filtros CSS para modificar imágenes sobre la marcha dentro del navegador. Estos funcionan perfectamente en Internet Explorer, pero no son compatibles con Firefox.

¿Alguien sabe cuál es el equivalente del filtro CSS de estos para Firefox? Se preferiría una respuesta que funcione en todos los navegadores (Safari, WebKit, Firefox, etc.). 

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

Actualización: Sé que Filter es una característica específica de IE. ¿Existe algún tipo de equivalente para cualquiera de estos que sea compatible con Firefox?

¿Fue útil?

Solución

Consulte la Biblioteca de efectos de imágenes de Nihilogic Javascript :

  • soporta IE y Fx bastante bien
  • tiene muchos efectos

Puede encontrar muchos otros efectos en los Proyectos CVI :

Buena suerte

Otros consejos

¿Podría darnos un ejemplo concreto de lo que está intentando hacer exactamente? Probablemente obtendría menos respuestas de " Su brower sux " y más " ¿Qué le parece probar este enfoque diferente? & Quot;

Normalmente, CSS se utiliza para controlar la apariencia del contenido HTML, no para agregar efectos o editar imágenes de manera inteligente. Lo que estás tratando de hacer podría ser posible usando javascript, pero una secuencia de comandos orientada al comportamiento probablemente no sea muy adecuada para el tipo de ajustes que quieres hacer (aunque algo como esta es una aventura divertida y muy ineficiente en CSS / JS tomfoolery).

No puedo imaginar un escenario en el que necesitarías al cliente para realizar ajustes de imagen en tiempo real. Puede modificar las imágenes del lado del servidor y simplemente hacer referencia a estas versiones modificadas con su CSS o posiblemente con Javascript, dependiendo de lo que esté haciendo exactamente. ImageMagick es una pequeña gran herramienta de línea de comandos para todos los efectos de imagen que necesitarías, y es bastante simple para usar solo o en el idioma del lado del servidor de su elección. O si estás usando PHP, creo que la biblioteca GD de PHP es bastante popular.

No hay equivalentes en otros navegadores. Lo más cerca que puedes estar es usar una biblioteca de gráficos como Canvas y manipular las imágenes en ella, pero deberías escribir las manipulaciones por ti mismo y necesitarían JavaScript.

filter es una función solo para IE, no está disponible en ningún otro navegador.

Filtros SVG aplicados al contenido HTML .

Solo funciona con Firefox 3.1 y superior, aunque creo que Safari va en la misma dirección.

Ninguna que yo sepa. El filtro fue solo para IE y no creo que ningún otro navegador haya seguido una funcionalidad similar.

¿Qué es un caso de uso específico que necesita?

Me temo que no está de suerte con la mayoría de las funciones de tipo de filter . CSS solo no le permitirá hacer la mayoría de estas cosas. Por ejemplo, no hay manera de invertir una imagen en un navegador cruzado utilizando CSS. Tendrá que tener dos copias diferentes de la imagen (una invertida) o podría intentar usar Javascript o quizás hacerlo de una manera completamente diferente, pero no existe una solución simple únicamente en CSS.

Hay filtros, como Gaussian Blur et al en SVG, que son compatibles de forma nativa con la mayoría de los navegadores, excepto IE.

Experimento de pensamiento puro aquí, puedes envolver tus imágenes en un objeto SVG sobre la marcha con javascript e intentar aplicarles filtros.

Dudo que esto funcione para imágenes de fondo, aunque quizás con un posicionamiento inteligente podría funcionar.

Es poco probable que sea una solución realista. Si no desea modificar permanentemente sus imágenes de origen, Rudi tiene la mejor respuesta, usar las herramientas del lado del servidor para aplicar transformaciones sobre la marcha (o en caché para el rendimiento) será la mejor solución para todos los navegadores.

Esta es una pregunta muy antigua, pero css se ha actualizado para admitir ahora los filtros. Lea más sobre esto en

https://developer.mozilla.org/en-US/ docs / Web / CSS / filter

Sintaxis

Con una función, usa lo siguiente: 

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

Para una referencia a un elemento SVG, use lo siguiente: 

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

En realidad no, y espero que nunca lo haya. No es una función de CSS estándar de la web por la razón de que estás usando CSS para dar formato a la página web, no al navegador en sí. El día en que otros diseñadores y desarrolladores web piensen que deberían diseñar mi navegador de la forma en que lo desean y luego lo hacen, es el día en que dejo de visitar sus páginas (y lo digo como un usuario de Internet).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top