CSS3 Degradados por píxel, en lugar de porcentaje

Question

Quiero crear un fondo de degradado lineal, que se adapte al mismo sin importar el tamaño de la ventana del navegador, para acomodar un encabezado de altura fija, subcabecera y div de contenido .

Mi problema es que no quiero que el degradado se escale cuando muevo la página. Podría usar una imagen de 1px de ancho para obtener el mismo resultado, supongo, pero en última instancia quiero que el sitio esté lo más libre de imágenes posible, salvo el logotipo.

¿Es posible utilizar un degradado definido por píxeles en lugar de un degradado definido por porcentaje?

Answer 1

Sí, puedes. Puede sustituir las unidades estándar en lugar de los porcentajes. Vea este ejemplo:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

actualización

Es necesario incluir los prefijos del navegador con el fin de utilizar el ejemplo anterior. Ellos serían especificados de la siguiente manera:

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 

Answer 2

Si usted quiere tener un gradiente de tamaño fijo, utilice la propiedad background-size para especificar su tamaño.