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

Question

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

Actualmente tengo un <div>, que tiene que tener un color diferente alrededor del 30% de la anchura 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 <div> s adicional?

Answer 1

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

En su lugar, podría definir un degradado de CSS con límites de color definidos para el fondo, p. Ej.

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

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

(. Ver también http://www.webkit.org/blog/1424/css3-gradients/ durante gradientes explicación CSS3, incluyendo el color truco límite claro)

Answer 2

Sólo se puede utilizar un solo color, pero tantas imágenes como desee, aquí es el formato:

background: [ <bg-layer> , ]* <final-bg-layer> 

<bg-layer> = <bg-image> || <bg-position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

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/

Answer 3

Sí, es posible! y se puede utilizar tantos colores y las imágenes como desee, aquí 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; 
 
}

Answer 4

En este LIVE DEMO que he logrado esto mediante el selector CSS :before que parece funcionar bastante 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; 
 
}

<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>

pensé que iba a añadir esto como que siento que podría funcionar bastante bien para un nivel de barra de porcentaje/visual de algo.

También significa que no va a crear varias Div si no tiene que hacerlo, y mantiene esta página hasta a la fecha de

Answer 5

En caso de que alguien necesita un fondo CSS con un color diferente repetición de rayas horizontales, aquí es como me las arreglé para conseguir 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; 
 
}

<div class="css-stripes">Hello World!</div>

JSfiddle

Answer 6

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 (vea 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%; 
 
}

<div id="composition"> 
 
</div>