Cómo implementar degradado de opacidad del examinador cruzado (no gradiente de color)

¿Cómo puedo implementar degradado de opacidad de navegador cruzado (no gradiente de color)? Ver siguiente código:
Cómo implementar degradado de opacidad del examinador cruzado (no gradiente de color)

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div>

Funciona bien en IE pero no en otros navegadores como Firefox, safari..etc. ¿Qué es la sintaxis equivalente para Firefox? No me sugiera que use una imagen de degradado.

Fuente

2010-04-16 Brij

Hay -moz-linear-gradient para las versiones recientes de Firefox y -webkit-gradient para los navegadores WebKit. La transparencia para esos dos debería ser posible usando rgba colores.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

La única solución real del 100% entre navegadores compatibles es una imagen sin embargo.

Fuente

2010-04-16 05:55:54 deceze

Esta respuesta no es correcta para la pregunta. No parece haber un equivalente al filtro de IE antiguo: inicio/finalización alfa para mozilla o gecko a través de CSS. – PlayGod

He estado tratando de encontrar la manera de que una imagen tenga una opacidad de gradiente lineal horizontal, de modo que pueda mostrarse el gradiente vertical de un div anterior. Esto se debe a que en mi aplicación, el usuario cargará la imagen que requiere el degradado de opacidad, por lo que la solución debe ser pura css/js. – PlayGod

Funcionará con IE, pero no se puede aplicar un degradado de opacidad lineal a un fondo de imagen. moz y gecko realmente crean una imagen cuando usas el degradado lineal de rgba, y el gradiente aparentemente solo puede ir en una dirección. Para obtener el efecto que perseguimos, necesitaría la capacidad de especificar un gradiente direccional para la opacidad y otro gradiente direccional para el gradiente de color. – PlayGod

Gracias @deceze,

estoy escribiendo CSS de ejemplo para otras personas que tienen el mismo requisito

top:0px; 
    opacity: 0.6;  
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500; 
background-color:#dcdcdc; 
     /* For WebKit (Safari, Google Chrome etc) */ 
     background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0))); 
     /* For Mozilla/Gecko (Firefox etc) */ 
     background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0)); 
     /* For Internet Explorer 5.5 - 7 */ 
     filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696); 
     /* For Internet Explorer 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";

Fuente

2010-04-22 05:20:24 Brij

Cómo implementar degradado de opacidad del examinador cruzado (no gradiente de color)

Respuesta

Cuestiones relacionadas