2012-07-26 12 views
10

Me pregunto si es posible aplicar dos filtros diferentes en IE usando CSS. Entonces, necesito usar un PNG transparente y también algo de opacidad en un div. ¿Es posible usar ambos?Múltiples filtros CSS en IE

Mi línea transparente de decisiones se ve así:

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; 
} 

He intentado añadir una línea más (filter: alpha(opacity=50);) y filtros separados con comas (.. 'scale') !important, alpha(opacity=50);), pero fue inútil.

+0

respuesta que ha seleccionado está mal .. Consulte la segunda respuesta ... – MonteCristo

Respuesta

7

No puede haber más de 1 propiedad de filtro, ya que IE solo aplicará la última.

NOTA: Dado que este parece ser cada vez un par de votos negativos que quería aclarar que esto no significa que no se puede aplicar varios filtros, sólo que sólo se puede utilizar 1 filter propiedad. Si intenta aplicar varios filtros y separarlos en varias propiedades, solo la última tendrá efecto.

acuerdo con el siguiente artículo de MSDN, no están separados por una coma, pero un espacio: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

en cuenta también que algunos filtros de IE (alfa incluido) requieren que el elemento de tener el diseño con el fin de ser aplicado correctamente : http://www.satzansatz.de/cssd/onhavinglayout.html

+2

lo que es todavía un pedazo de ... (: –

15

Lo sentimos, pero la respuesta elegida anteriormente no es correcta. Usted puede aplicar filtros múltiples en IE, pero deben estar separados por uno o más espacios.

Una coma antes de los espacios también funcionará, pero solo si sigue un corchete de cierre. Por lo tanto, los filtros IE 4.0 sin parámetros como gray no funcionan en este caso. Lo mejor es atenerse a los espacios solo como un separador.

Si va al enlace anterior: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx y hace clic en following example link (en IE, por supuesto), verá que se aplica una rotación y un desenfoque a la segunda imagen. A partir de "ver fuente", la etiqueta de la imagen es:

<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"> 

algo que han simulado con éxito la "propagación" de una sombra caja en Internet Explorer 7 y 8 (aunque el éxito depende de lo aceptable, se piensa que no es), usando:

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); 

para que una sombra se extienda desde todos los lados de un div. También he combinado sombras en div's que contienen degradados. Sin embargo, esto no viene sin su propio peligro. En el caso anterior, las sombras tienen diseño, y debe ajustar los márgenes para acomodar su tamaño. Además, dado que IE es IE, las combinaciones de algunos de estos filtros pueden tener consecuencias imprevistas, lo que lleva a desarrollar soluciones alternativas, abandonar enfoques y arrancarse el cabello.

En sus ejemplos originales en su pregunta, si incluye más de un filtro, el siguiente será reemplazado por el siguiente, al igual que cualquier otra propiedad de CSS. En su segundo ejemplo, "! Important" necesita estar completamente al final del estilo, o todo el bloque de CSS se descarta porque está mal formateado. (En realidad,! Necesita ser descartada completamente. La única razón por la que necesitaría usarla es si está desarrollando código de terceros y necesita defender sus etiquetas de otro desarrollador importante y feliz sobre el que no tiene control .Si su estilo está siendo anulado involuntariamente, necesita una declaración más específica.)

+0

sip @ Greg, tienes razón :) – nerdess

+0

@ Greg, eres Genial :) funciona para mí. – user2142786

+2

Debe tener en cuenta que con IE 8, si tiene un filtro, los espacios no funcionan. Comas será necesario. –

0

La coma se ignora. Necesita un espacio en blanco o una línea nueva para pegar varios filtros.

progid:xxx progid:yyy/works 

progid:xxx, progid:yyy/works 

progid:xxx 
progid:yyy/works 

progid:xxx,progid:yyy/will not work