Qual è l'alternativa al filtro CSS per Firefox?

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

Domanda

Sto usando i filtri CSS per modificare le immagini al volo all'interno del browser. Funzionano perfettamente in Internet Explorer, ma non sono supportati in Firefox.

Qualcuno sa quale sia l'equivalente del filtro CSS per questi è per Firefox? È preferibile una risposta che funzioni su più browser (Safari, WebKit, Firefox, ecc.). 

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

Aggiornamento: so che Filter è una funzionalità specifica di IE. Esiste un tipo di equivalente per uno di questi supportato da Firefox?

È stato utile?

Soluzione

Controlla la Biblioteca di effetti immagine Nihilogic Javascript :

  • supporta IE e Fx abbastanza bene
  • ha molti effetti

Puoi trovare molti altri effetti nei Progetti CVI :

Buona fortuna

Altri suggerimenti

Potresti darci un esempio concreto di cosa stai esattamente cercando di fare? Probabilmente otterrai meno " Il tuo brower sux " risposte e più " Che ne dici di provare questo diverso approccio? & Quot; .

Normalmente i CSS sono usati per controllare l'aspetto del contenuto HTML, non per aggiungere effetti o modificare immagini in modo intelligente. Quello che stai cercando di fare potrebbe essere possibile utilizzando JavaScript, ma uno script orientato al comportamento probabilmente non è ancora molto adatto al tipo di modifica che vuoi fare (anche se qualcosa come questa è un'avventura divertente e molto inefficiente nella tomfoolery CSS / JS).

Non riesco a immaginare uno scenario in cui hai bisogno del client per eseguire il ritocco delle immagini in tempo reale. Puoi modificare le immagini sul lato server e fare semplicemente riferimento a queste versioni modificate con il tuo CSS o eventualmente Javascript, a seconda di cosa stai facendo esattamente. ImageMagick è un piccolo strumento da riga di comando per tutti gli effetti di immagine di cui potresti mai avere bisogno, ed è piuttosto semplice da usare da solo o nella lingua lato server di tua scelta. O se stai usando PHP, credo che libreria GD di PHP sia piuttosto popolare.

Non ci sono equivalenti in altri browser. Il più vicino che potresti ottenere è usare una libreria grafica come Canvas e manipolare le immagini al suo interno, ma dovresti scrivere tu stesso le manipolazioni e richiederebbero JavaScript.

filter è una funzione solo IE - non è disponibile in nessun altro browser.

Filtri SVG applicati al contenuto HTML .

Funziona solo con Firefox 3.1 e versioni successive, anche se penso che Safari stia andando nella stessa direzione.

Nessuno di cui io sia a conoscenza. Il filtro era una cosa unica di IE e non credo che nessun altro browser abbia seguito con funzionalità simili.

Che cos'è un caso d'uso specifico di cui hai bisogno?

Temo che tu sia quasi sfortunato con la maggior parte delle funzionalità di tipo filter cross-browser. I CSS da soli non ti permetteranno di fare la maggior parte di queste cose. Ad esempio, non è possibile invertire un browser incrociato di immagini usando solo CSS. Dovrai avere due copie diverse dell'immagine (una invertita) o potresti provare a usare Javascript o magari farlo in un modo completamente diverso, ma non esiste una soluzione semplice solo nei CSS.

Esistono filtri, come Gaussian Blur et al. in SVG, che è supportato in modo nativo dalla maggior parte dei browser tranne IE.

Esperimento di puro pensiero qui, potresti avvolgere le tue immagini in un oggetto SVG al volo con javascript e tentare di applicare loro dei filtri.

Dubito che questo funzionerebbe per le immagini di sfondo, anche se forse con un posizionamento intelligente potrebbe funzionare.

È improbabile che sia una soluzione realistica. Se non si desidera modificare in modo permanente le immagini di origine, Rudi ha la risposta migliore, utilizzando gli strumenti lato server per applicare le trasformazioni al volo (o memorizzate nella cache per le prestazioni) sarà la migliore soluzione cross-browser.

Questa è una domanda molto antica ma css è stato aggiornato per ora supporta i filtri. Maggiori informazioni su

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

Sintassi

Con una funzione, utilizzare quanto segue: 

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

Per un riferimento a un elemento SVG, utilizzare quanto segue: 

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

Non proprio, e speriamo che non ci sarà mai. Non è una funzionalità CSS standard web per il motivo che stai usando CSS per formattare la pagina web, non il browser stesso. Il giorno in cui altri web designer e sviluppatori pensano che dovrebbero modellare il mio browser come desiderano e lo fanno, è il giorno in cui smetto di visitare le loro pagine (e lo dico come un web front-end).

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top