Múltiples colores de fondo en 1 DIV

Question

Tengo un div, y me gustaría aplicar 2 fondos horizontalmente con CSS3, pero no puedo entenderlo, por lo que agradecería cualquier ayuda.

background: blue top no-repeat 10%; 
    background: yellow bottom no-repeat 10%; 

Quiero que la mitad superior sea de un color y que la mitad inferior sea de un color diferente.

Sé que se puede hacer bastante fácilmente con las imágenes, pero simplemente no puedo encontrar la manera de hacerlo sin usarlas.

Answer 1

un degradado es una forma razonablemente sencilla de hacer esto utilizando CSS3 y sólo una div:

http://jsfiddle.net/thirtydot/8wH2F/

Sí, mentí. No es muy sencilla a todos debido a las diferentes versiones miríada de proveedor con el prefijo de la misma cosa que usted necesita para su uso:

div { 
    background: #000fff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */ 
    background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */ 
} 

me genera el CSS here, y quité la propiedad filter ya que dará lugar a un gradiente real en IE6-9.

Answer 2

Otra forma de lograr esto, aparte de los gradientes, es el uso de pseudo-elemento:

http://jsfiddle.net/kizu/S3LXB/

Añadir position: relative y algunas positivas z-index al elemento y el negativo z-index a la pseudo-elemento, y se colocaría sobre el fondo del elemento, pero bajo el contenido del elemento. Y luego puedes posicionarte en la forma que quieras.

De esta forma no es tan flexible como la que tiene gradientes, pero! Puede usar los degradados para el pseudo-elemento y así lograr aún más efectos más fácilmente.