imagenes - ¿Puedes crear degradados que se desvanezcan en opacidad con CSS o JavaScript?

imagen de fondo con degradado css

Question

WebKit ha introducido la capacidad de crear degradados de CSS. Por ejemplo, con el siguiente código:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

Sin embargo, ¿es posible tener un gradiente de opacidad con CSS? Quiero que el degradado sea de un solo color en un lado y difuminado a cero en el otro.

La compatibilidad entre navegadores no es importante; Solo necesito que funcione en Google Chrome.

¿Hay alguna forma de hacer esto usando CSS? Si no, ¿se puede hacer algo similar usando JavaScript (no jQuery)?

Gracias por tu ayuda.

Answer 1

Sí, rgba(red, green, blue, alpha) es lo que debe usar http://www.w3.org/TR/css3-color/#rgba-color , ejemplo ( pruébelo en jsFiddle ):

/* Webkit */
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgba(0,0,0,0.0)), /* Top */
color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);
/* Gecko */
background: -moz-linear-gradient(
center bottom,
rgba(0,0,0,1.0) 0%, /* Bottom */
rgba(0,0,0,0.0) 100% /* Top */
);

Answer 2

no probado, pero esto debería funcionar (en FF esto funciona (con una sintaxis diferente) - no estoy seguro si safari / webkit sabe rgba):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));

Answer 3

Sí

para los colores, use rgba (x, y, z, o) donde o es la opacidad

Deberia trabajar

p.ej

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

Editar: para el valor final (opacidad) 1 es opaco y 0 es transparente