todos - linea gradient css

Gradiente CSS3 con transparencia que no se muestra correctamente en Safari

Question

Este es un acertijo. El siguiente degradado no se muestra correctamente en Safari (funciona en Firefox y Chrome):

background: linear-gradient(transparent 124px, #de6230);

También he intentado:

background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);

Pruébalo en Safari y verás el problema: jsFiddle .

¿Cómo puedo solucionar esto?

Answer 1

Pruebe: fondo: gradiente lineal (rgba (255,255,255,0) 124px, # de6230);

Editar: lo siento OP, que aún no se ve igual a su gradiente, aunque es los colores correctos, el centro gris acaba de convertirse en un medio blanco. La solución que encontré fue:

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);

222,98,48 es el valor de rgb de # de6230, así que debería funcionar. Está en transición de su color en 0% alfa a su color en 100% alfa.

Answer 2

Tratar:

background: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);

o reemplaza el fondo con background-image

background-image: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: linear-gradient(rgba(255,0,0,0) 124px, #de6230);