2010-09-18 14 views
11

Quiero tener un degradado como fondo de mi página web. He descubierto cómo hacer que el degradado sea vertical, pero quiero que sea horizontal.gradientes de CSS horizontal?

background-image: -webkit-gradient(linear, 0% 25%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255))); 
background-image: -moz-linear-gradient(center bottom, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%); 

Respuesta

8

Para -webkit-gradient que definen la dirección mediante el uso de los dos puntos (el 2 y 3 de argumentos en su caso), y por -moz-linear-gradient Es definido por el punto de partida solamente (el primer argumento). Así que para convertir esos gradientes a las horizontales, que haría:

background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255))); 
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%); 

(Puede que tenga que ajustar sus valores de color porque eres la definición de los puntos de forma diferente para cada navegador Podría ser más fácil si se establece el. apunta a center right, center left para Webkit y para que coincida con Mozilla.)

+0

¿De todos modos para que esto funcione con IE9? – daveomcd

+1

Sí. Utilice esta línea para Internet Explorer 8 y 9: '-ms-filter:" progid: DXImageTransform.Microsoft.Gradient (GradientType = 1, startColorstr = '# b0c4de', endColorstr = '# ffffff') "' – Henrik

Cuestiones relacionadas