Wie kann ich eine einzelne div mehrere Hintergrundfarben oder Bilder in CSS geben? Zum Beispiel möchte ich, dass der obere Teil rot ist, dann die Mitte blau und die untere grün.Mehrere Hintergrundfarben, Bilder in CSS
Ein einzelner linear-gradient als Hintergrund ist genug
background: linear-gradient(to bottom,
red 0, red 33.33%,
blue 0, blue 66.66%,
green 0, green 100%
);
Nizza. Kannst du erklären, was die 0 ohne% -Zeichen tun? –
So funktioniert Farbstopp: Wenn Sie einen Farbstopp einstellen, dessen Wert unter der vorherigen Farbe liegt, wird automatisch der größte Wert eingestellt, der zuvor definiert wurde. Also ist es äquivalent zu schreiben "rot 0, rot 33,33%, blau 33,33, blau 66,66%, grün 66,66, grün 100%" aber es gibt weniger wiederholte Werte (wenn Sie beispielsweise 66,66 mit 80% geändert haben, sollten Sie den Wert zweimal ändern) – fcalderan
Verwenden Sie Farbverläufe 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 */
}
oben, unten, CENTER mehrere Farb Tutorial für Sigle Linie
#multiple {
width: 700px;
height: 500px;
background:linear-gradient(red, yellow, green, blue, purple, orange);
}
Verwenden Sie :before and :after pseudo element rules, um drei verschiedene Hintergrundschichten (Farbe und Bilder) auf einem einzelnen Element zu haben.
Hinweis: Bei dieser Lösung müssen die enthaltenen Elemente so verpackt werden, dass sie über den Hintergründen bleiben. Andernfalls sind die Links möglicherweise nicht anklickbar, der Text ist nicht auswählbar usw.
Führen Sie das Code-Snippet für ein funktionierendes Beispiel aus.
.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>
Hallo, einen Blick auf diesen Thread nehmen. http://StackOverflow.com/a/6457484/4362192 – cdslijngard