background

div {
       background: rgb(123,123,123);
}

div {
       background: rgba(123,123,123,0.5);
}

background-color: green; /* Nicht alle browser unterstützen Gradienten! */

---

linear-gradient

Beispielgradient:

Grundaufbau:

background-image: linear-gradient(Richtung,Farbe1,Farbe2,Farbe3,usw.); [Leerzeichen sind erlaubt]


Richtungen: (to top, to right, to bottom (default), to left, ###deg)

background-image: linear-gradient(to top,red,yellow);

background-image: linear-gradient(to top,red,yellow,green);


background-image: linear-gradient(to right,red 10%,yellow 50%,green 60%); (Bei angegebenen Prozenten/ px, wird an dieser Stelle der Farbwert erreicht)

Übungsaufgabe:
1) Erstellen Sie einen linearen Gradienten mit einem Farbverlauf von 45° mit den Farben schwarz 20%, grau 40%, weiß 70%, gelb 80%, orange 90%, rot 95%!


2) Erstellen Sie einen linearen Gradienten mit einer Ausrichtung nach rechts. Die Farbreihenfolge ist: schwarz, dunkelgrau, hellgrau, weiß, schwarz! Jede Farbe soll eine Breite von 20% haben. Es sollen keine Farübergänge vorhanden sein, sodass die Farben immer als reine Farben dargestellt werden
Lösung:

Teil 1: background-image: linear-gradient(to right, black 20%, darkgrey 40%, grey 60%, white 80%, black);


Teil 2: background-image: linear-gradient(to right, black 20%, darkgrey 20%, darkgrey 40%, grey 40%, grey 60%, white 60%, white 80%, black 80%);


repeating-linear-gradient

Beispielgradient:

background-image: repeating-linear-gradient(45deg,red 0%,yellow 7%,green 10%);
(Wiederholungen von Farbgradienten (0% muss nicht angegeben werden) [die Differenz entscheidet die Breite einer Wiederholung
background-image: repeating-linear-gradient(90deg,red,yellow 50px,green 100px); (Wenn div 200px hoch, passt Gradient 2x rein)



radial-gradient

Beispielgradient:

background-image: radial-gradient(Farbe1,Farbe2,Farbe3,usw.); (Farben sind radial angeordnet von innen nach außen [Leerzeichen sind erlaubt])
background-image: radial-gradient(red 5%,yellow 15%, green 60%);


repeating-radial-gradient

Beispielgradient:

background-image: repeating-radial-gradient(red 0%,yellow 10%,green 15%);
Wenn man nicht mit der 1. Farbe bei 0 % beginnt, kann die letzte Farbe sich mit reinmischen


conic-gradient

Beispielgradient:

Auch zum Anzeigen von Kreisdiagrammen geeignet!

border-radius: 50%; background: conic-gradient(red 15%,blue 15%,blue);

border-radius: 50%; background: conic-gradient(red, red 15%, blue 15%, blue 70%, gold 70%, gold 100%);

background: conic-gradient(red, gold, lime, blue);



background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);

background-size: 25% 25%;

---

Text mir Struktur vom Hintergrund: -webkit-background-clip: text; & -webkit-text-fill-color: transparent; (Zeilenhöhe ggf. anpassen)

test test test

test test test test test test test

---

Hintergrundbilder

div {
       width: 100%;
       height: 300px;
       background-image: url('http://volterra.bplaced.de/1.jpg');
       background-repeat: no-repeat;
       background-size: contain;
       border: 1px dashed red;
}

---

div {
       width: 100%;
       height: 300px;
       background-image: url('http://volterra.bplaced.de/1.jpg');
       background-repeat: repeat;
       background-size: contain;
       border: 1px dashed red;
}

---

div {
       width: 100%;
       height: 300px;
       background-image: url('http://volterra.bplaced.de/1.jpg');
       background-size: 100% 100%;
       border: 1px dashed red;
}

---

div {
       width: 100%;
       height: 300px;
       background-image: url('http://volterra.bplaced.de/1.jpg');
       background-size: cover;
       border: 1px dashed red;
}

---

Auch ein Hintergrundbild kann verschoben werden mit background-position

(X-Achse Y-Achse)
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
50% 50%
25% 75%
10px 200px
50px 50px

center 200px






Wie geht es mit mehreren unterschiedlichen Hintergrundbildern in einem Element?





zur Fixierung des Hintergrundbilds im Element kann folgender Befehl im CSS eingegeben werden: background-attachment: fixed;

Beispiel:

background-image: url('http://volterra.bplaced.de/1.jpg');
background-color: #cccccc;
height: 500px;
width: 70%;
margin: 0 auto;
background-size: cover;
background-attachment: fixed;
background-position: center;

Zoom per :hover




Zoom per :hover + Text