Wat is die CSS Filter alternatiewe vir Firefox?

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

Vra

Ek is met behulp van CSS Filters om beelde op die vlieg in die leser verander. Hierdie werk perfek in Internet Explorer, maar word nie ondersteun in Firefox.

Is daar iemand weet wat die CSS Filter ekwivalent vir hierdie is vir Firefox? 'N antwoord wat kruis leser (Safari, WebKit, Firefox, ens) sou werk sou verkies. 

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

Update: Ek weet Filter is 'n Internet Explorer spesifieke funksie. Is daar enige soort van ekwivalente vir enige van hierdie wat deur Firefox?

Was dit nuttig?

Oplossing

Gaan asseblief die Nihilogic Javascript Image effek Biblioteek :

  • ondersteun Internet Explorer en Fx baie goed
  • 'n baie gevolge

Jy kan baie ander effekte in die vind CVI Projekte :

  • hulle ook JS gebaseer
  • daar is 'n Lab tot
    • eksperimenteer

Sterkte

Ander wenke

Kan jy vir ons 'n konkrete voorbeeld van wat presies jy probeer om te doen? Jy sou waarskynlik kry minder "Jou Brower sux" antwoorde en meer "Hoe gaan dit probeer hierdie verskillende benadering?" kinders.

Gewoonlik CSS word gebruik om die voorkoms en gevoel van HTML-inhoud te beheer, nie-effekte te voeg of te wysig beelde in slim maniere. Wat jy probeer om te doen dalk moontlik wees met behulp van JavaScript, maar 'n gedrag georiënteerde script nog waarskynlik is nie baie geskik vir die soort van die opstel van wat jy wil doen (hoewel iets soos hierdie is 'n prettige en baie ondoeltreffende avontuur in CSS / JS poppenkasterij).

Ek kan nie dink 'n scenario wanneer jy wil behoefte die kliënt te beeld opstel voer in real-time. Jy kan beelde verander bediener-kant en eenvoudig verwys hierdie gewysigde weergawes met jou CSS of dalk Javascript, afhangende van wat jy presies doen. Imagemagick is 'n groot bietjie command-line hulpmiddel vir al die beeld effekte wat jy ooit nodig sal hê, en is redelik maklik om te gebruik op sy eie of in die bediener-kant taal van jou keuse. Of as jy die gebruik van PHP, ek glo GD biblioteek PHP se is redelik gewild.

Daar is geen ekwivalente in ander blaaiers. Die naaste wat jy kan kry is die gebruik van 'n grafiese biblioteek soos doek en die beelde te manipuleer in dit, maar jy wil hê die manipulasies jouself te skryf en hulle het JavaScript nodig.

filter is die enigste IE-funksie - dit is nie beskikbaar in enige ander leser

.

SVG filters toegepas HTML inhoud .

Slegs werk in Firefox 3.1 en hoër, maar ek dink Safari is op pad in dieselfde rigting.

Geen waarvan ek weet. Filter was die enigste IE ding en ek dink nie enige ander leser het gevolg met 'n soortgelyke funksie.

Wat is daar 'n spesifieke gebruik geval wat jy nodig het?

Ek is bevrees dat jy pretty much out of luck met die meeste van die kruis-leser filter-tipe funksies. CSS alleen sal nie toelaat dat jy die meeste van hierdie dinge te doen. Byvoorbeeld, daar is geen manier om 'n beeld kruis-leser Keer net met behulp van CSS. Jy sal hê om twee verskillende kopieë van die beeld (een omgekeerde) of jy kan probeer om met behulp Javascript of miskien gaan daaroor 'n heeltemal ander manier, maar daar is nie 'n eenvoudige oplossing uitsluitlik in CSS.

Daar is filters, soos Gaussiese Blur et al in SVG, wat native ondersteun deur die meeste blaaiers behalwe IE.

Pure gedagte-eksperiment hier, kan jy jou foto's in 'n SVG voorwerp op die vlieg met JavaScript draai en probeer om filters toe te pas om hulle.

Ek twyfel of dit sou werk vir agtergrond beelde, maar miskien met 'n baie slim plasing dit kan werk.

Dit is onwaarskynlik dat 'n realistiese oplossing wees. As jy nie wil hê om permanent verander jou bron beelde, Rudi het die beste antwoord, met behulp van die bediener kant gereedskap om transformasies van toepassing op die vlieg (of kas vir prestasie) sal die beste kruis leser oplossing wees.

Dit is 'n baie baie ou vraag maar css het opgedateer om nou filters te ondersteun. Lees meer daaroor op

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

Sintaks

Met 'n funksie, gebruik die volgende: 

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

Vir 'n verwysing na 'n SVG element, gebruik die volgende: 

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

Nie regtig nie, en hopelik is daar nooit sal wees. Dit is nie 'n web standaard CSS funksie vir die rede dat jy met behulp van CSS om die webblad, nie die leser self te formateer. Die dag dat ander web ontwerpers en ontwikkelaars dink hulle moet my leser styl hoe hulle wil en dan doen dit is die dag wat ek ophou besoek hul bladsye (en ek sê dit as 'n front-end web man).

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top