Più colori di sfondo, immagini in css

Question

Come posso assegnare un singolo div a più colori di sfondo o immagini in CSS? Ad esempio, voglio che la parte superiore sia rossa, quindi la parte centrale sia blu e quella inferiore sia verde.

Answer 1

Una singola linear-gradient come sfondo è sufficiente

background: linear-gradient(to bottom, 
    red 0, red 33.33%, 
    blue 0, blue 66.66%, 
    green 0, green 100% 
); 

Example | Browser support

Answer 2

utilizzare gradienti in css3.

YourDIVID { 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow, green); /* Standard syntax */ 
} 

Answer 3

superiore, inferiore, CENTRO Tutorial colore multiplo per Sigle Linea

#multiple { 
width: 700px; 
height: 500px; 
background:linear-gradient(red, yellow, green, blue, purple, orange); 

}

Answer 4

Utilizzare :before and :after pseudo element rules per disporre di tre diversi livelli di sfondo (colore e immagini) su un singolo elemento.

Nota: Questa soluzione richiede che gli elementi contenuti siano avvolti per rimanere sopra gli sfondi. In caso contrario, i collegamenti potrebbero non essere selezionabili, testo non selezionabile, ecc.

Eseguire il frammento di codice per un esempio funzionante.

.layered-backgrounds { 
 
    background-color: #C63; 
 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    position: relative; 
 
    height: 400px; 
 
    z-index: 1; 
 
} 
 

 
.layered-backgrounds:before { 
 
    position: absolute; 
 
    content: " "; 
 
    top: 0; 
 
    height: 120px; 
 
    width: 100%; 
 
    background: #39C; 
 
    z-index: 2; 
 
    opacity: 0.8; 
 
} 
 

 
.layered-backgrounds:after { 
 
    position: absolute; 
 
    content: " "; 
 
    bottom: 0; 
 
    height: 120px; 
 
    width: 100%; 
 
    background: #9C3; 
 
    z-index: 3; 
 
    opacity: 0.8; 
 
} 
 

 
.layered-backgrounds .content { 
 
    position: relative; 
 
    z-index: 4; 
 
}

<div class="layered-backgrounds"> 
 
    <div class="content"> 
 
     <a href="#">Clickable</a> and selectable contents. 
 
    </div> 
 
</div>