¿Puedo aplicar múltiples colores de fondo con CSS3?

Sé cómo especificar varias imágenes de fondo con CSS3 y cómo se muestran con diferentes opciones.

Actualmente tengo un

, que necesita tener un color diferente para aproximadamente el 30% del ancho en el lado izquierdo:

 div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;} 

En lugar de cargar la imagen que es totalmente gris, ¿cómo puedo hacer esto especificando el color, y sin

s adicionales?

Realmente no se puede: los colores de fondo se aplican a la totalidad de los fondos de los elementos. Los mantiene simples.

En su lugar, podría definir un degradado de CSS con límites de color nítidos para el fondo, por ejemplo

 background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white); 

Pero solo unos pocos navegadores lo respaldan en este momento. Ver http://jsfiddle.net/UES6U/2/

(Consulte también http://www.webkit.org/blog/1424/css3-gradients/ para obtener una explicación de los degradados de CSS3, incluido el truco del límite de color nítido).

¡Si es posible! y puedes usar tantos colores e imágenes como desees, esta es la manera correcta:

 body{ /* Its, very important to set the background repeat to: no-repeat */ background-repeat:no-repeat; background-image: /* 1) An image */ url(http://lorempixel.com/640/100/nature/John3-16/), /* 2) Gradient */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), /* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233)); background-position: /* 1) Image position */ 0 0, /* 2) Gradient position */ 0 100px, /* 3) Color position */ 0 130px; background-size: /* 1) Image size */ 640px 100px, /* 2) Gradient size */ 100% 30px, /* 3) Color size */ 100% 30px; } 

Solo puede usar un color pero tantas imágenes como desee, aquí está el formato:

 background: [  , ]*  

= || [ / ]? || || || {1,2}

= || [ / ]? || || || {1,2} ||

o background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;

Si necesita más colores, haga una imagen de un color sólido y úselo. Sé que no es lo que quieres escuchar, pero espero que ayude.

El formato es de http://www.css3.info/preview/multiple-backgrounds/

En esta DEMO EN VIVO lo he logrado utilizando el selector : before css, que parece funcionar muy bien.

 .myDiv { position: relative; /*Parent MUST be relative*/ z-index: 9; background: green; /*Set width/height of the div in 'parent'*/ width:100px; height:100px; } .myDiv:before { content: ""; position: absolute;/*set 'child' to be absolute*/ z-index: -1; /*Make this lower so text appears in front*/ /*You can choose to align it left, right, top or bottom here*/ top: 0; right:0; bottom: 60%; left: 0; background: red; } 
 
this is my div with multiple colours. It work's with text too!

Puede usar tantos colores e imágenes como desee.

Tenga en cuenta que la prioridad con la que se representan las imágenes de fondo es FILO, la primera imagen especificada está en la capa superior, la última imagen especificada está en la capa inferior (consulte el fragmento).

 #composition { width: 400px; height: 200px; background-image: linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */ linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */ linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */ url('http://lorempixel.com/400/200/'); /* image */ background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */ background-position: 0 0, /* gradient 1 */ 20px 0, /* gradient 2 */ 40px 0, /* gradient 3 */ 0 0; /* image position */ background-size: 30px 30px, 30px 30px, 30px 30px, 100% 100%; } 
 

En caso de que alguien necesite un fondo CSS con diferentes franjas horizontales que repiten colores, así es como logré lograr esto:

 body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; } .css-stripes { margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* For browsers that do not support gradients */ background-color: #F691FF; /* Safari 5.1 to 6.0 */ background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8); /* Opera 11.1 to 12.0 */ background: -o-repeating-linear-gradient(#F691FF, #EC72A8); /* Firefox 3.6 to 15 */ background: -moz-repeating-linear-gradient(#F691FF, #EC72A8); /* Standard syntax */ background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8); background-size: 1px 2px; } 
 
Hello World!