#background-image
Legt ein Bild als Hintergrund für das Element fest.
default
background-image: none;
Entfernt jedes Hintergrundbild.
background-image: url(/images/jt.png);
Verwendet das im url Pfad definierte Bild. Dieser Pfad kann entweder relativ (zur css-Datei) oder absolut sein (wie http://cssreference.io/images/jt.png
).
background-image: linear-gradient(red, blue);
Sie können einen linearen Farbverlauf als Hintergrundbild definieren.
Sie müssen mindestens zwei Farben definieren. Die erste Farbe wird oben beginnen, die zweite unten.
Der Standardwinkel ist to bottom
(oder 180deg
), was bedeutet, dass der Farbverlauf vertikal ist und oben beginnt und unten am Element endet.
background-image: linear-gradient(45deg, red, blue);
Sie können einen Winkel angeben, entweder in Grad oder mit Schlüsselwörtern.
Wenn Sie Grad verwenden, geben Sie die Richtung des Gradienten an, oder wann er endet. So bedeutet 0deg
die Spitze des Elements, wie 12:00 auf einer Uhr.
In diesem Beispiel bedeutet 45deg
2:30, oder die obere rechte Ecke.
background-image: radial-gradient(green, purple);
Sie können einen radialen Farbverlauf als Hintergrundbild definieren.
Sie müssen mindestens zwei Farben definieren. Die erste wird in der Mitte sein, die zweite an den Rändern.
background-image: radial-gradient(circle, green, purple);
Sie können die Form des radialen Farbverlaufs angeben: Kreis oder Ellipse (Standard).
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
Sie können Farbstopps mit Prozentwerten angeben.
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
Du kannst angeben, wo der Farbverlauf enden soll:
closest-side
closest-corner
farthest-side
farthest-corner
background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
Wie bei der Hintergrund-Position
können Sie die Position des Farbverlaufs angeben.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022