2012-07-26 7 views
10

Ich frage mich nur, ob es möglich ist, zwei verschiedene Filter in IE mit CSS anzuwenden. Also, ich muss ein transparentes PNG und auch etwas Opazität zu einem div verwenden. Ist es möglich, beide zu benutzen?Mehrere CSS-Filter in IE

Meine transparent Macher Linie sieht wie folgt aus:

li.item .item-texture { 
    background: none transparent scroll repeat 0% 0% !important; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ie/articles/item-content-hov.png', sizingMethod='scale') !important; 
} 

Ich habe versucht, eine weitere Zeile (filter: alpha(opacity=50);) und separate Filter mit Komma hinzufügen (.. 'scale') !important, alpha(opacity=50);), aber es war nutzlos.

+0

Antwort Sie ist falsch ausgewählt .. auf die zweite Antwort finden ... – MonteCristo

Antwort

7

Es kann nicht mehr als 1 Filtereigenschaft geben, da IE nur die letzte wirksam werden lässt.

HINWEIS: Da diese Stimmen immer ein paar nach unten zu sein scheint ich, dass dies nicht klären wollte, bedeutet, dass Sie mehrere Filter nicht anwenden können, nur, dass Sie nur 1 filterEigenschaft verwenden können. Wenn Sie mehrere Filter anwenden und sie in mehrere Eigenschaften aufteilen, wird nur die letzte wirksam.

Nach dem folgenden Artikel von MSDN, werden sie nicht durch ein Komma, sondern ein Leerzeichen getrennt: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

Beachten Sie auch, dass einige IE-Filter (alpha enthalten) erfordern das Element Layout zu haben, um richtig angewendet zu werden : http://www.satzansatz.de/cssd/onhavinglayout.html

+2

es ist also noch ein Stück ... (: –

15

Entschuldigung, aber die gewählte Antwort ist nicht korrekt. Sie können mehrere Filter in IE anwenden, aber sie müssen durch ein oder mehrere Leerzeichen getrennt werden.

Ein Komma vor den Leerzeichen funktioniert auch, aber nur, wenn es einer schließenden Klammer folgt. IE 4.0 Filter ohne Parameter wie gray funktionieren in diesem Fall nicht. Es ist am besten, sich nur als Trennzeichen an Leerzeichen zu halten.

Wenn Sie zu dem Link oben gehen: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx, und klicken Sie auf die following example link (in IE, natürlich), sehen Sie, dass eine Drehung und eine Unschärfe auf das zweite Bild angewendet werden. Von „Quelltext anzeigen“, ist das Bild tag:

<img id=image2 src="/workshop/samples/author/dhtml/graphics/sample.jpg" 
    style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50), 
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)" 
    height="165px" width="256px" border="0" alt="ocean beach"> 

Ich habe etwas erfolgreich simuliert die „Spread“ eines Kastens Schatten in IE7 und 8 (obwohl erfolgreich hängt davon ab, wie akzeptabel Sie denken, es sieht), mit:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=0) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=90) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=180) 
     progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=270); 

so dass ein Schatten von allen Seiten eines div verbreitet. Ich habe auch Schatten auf Divs kombiniert, die Farbverläufe enthalten. Dies ist jedoch nicht ohne eine eigene Gefahr. Im obigen Fall haben die Schatten ein Layout, und Sie müssen die Ränder entsprechend ihrer Größe anpassen. Da IE auch IE ist, können Kombinationen einiger dieser Filter unbeabsichtigte Konsequenzen haben, was zu sich entwickelnden Workarounds, dem Verlassen von Ansätzen und dem Ausreißen von Haaren führt.

Wenn Sie in Ihren ursprünglichen Beispielen in Ihrer Frage mehr als einen Filter auflisten, wird der vorherige wie jeder andere CSS-Property durch den nachfolgenden überschrieben. In Ihrem zweiten Beispiel muss "! Wichtig" vollständig am Ende des Stils sein, oder der gesamte CSS-Block wird verworfen, da er falsch formatiert ist. (Eigentlich muss! Wichtig komplett rausgeschmissen werden. Über den einzigen Grund, den Sie jemals benötigen würden, ist, wenn Sie Code von Drittanbietern entwickeln und Ihre Tags von einem anderen, wichtig-glücklichen Entwickler verteidigen müssen, über den Sie keine Kontrolle haben .Wenn Ihr Stil unbeabsichtigt außer Kraft gesetzt wird, benötigen Sie eine spezifischere Deklaration.)

+0

yep @ Greg, sind Sie hier richtig :) – nerdess

+0

@ Greg, du bist Großartig :) es funktioniert für mich. – user2142786

+2

Beachten Sie, dass mit IE 8, wenn Sie einen Filter haben, Leerzeichen nicht funktionieren. Kommas werden benötigt. –

0

Das Komma wird ignoriert. Sie benötigen einen Whitespace oder eine Newline, um mehrere Filter einzufügen.

progid:xxx progid:yyy/works 

progid:xxx, progid:yyy/works 

progid:xxx 
progid:yyy/works 

progid:xxx,progid:yyy/will not work