CSS -Bildreflexion
In diesem Kapitel lernen Sie, wie Sie ein Bild spiegeln.
![](https://www.w3schools.com/howto/img_tree.png)
CSS-Bildreflexionen
Die box-reflect
Eigenschaft wird verwendet, um eine Bildreflexion zu erstellen.
Der Wert der box-reflect
Eigenschaft kann sein: below
, above
,
left
, oder right
.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Beispiele
Beispiel
Hier wollen wir die Reflexion unter dem Bild:
img {
-webkit-box-reflect: below;
}
Beispiel
Hier wollen wir die Reflexion rechts vom Bild:
img {
-webkit-box-reflect: right;
}
CSS-Reflexionsoffset
Um die Lücke zwischen dem Bild und der Reflexion anzugeben, fügen Sie die Größe der Lücke zur box-reflect
Eigenschaft hinzu.
Beispiel
Hier wollen wir die Reflexion unter dem Bild mit einem Versatz von 20 Pixel:
img {
-webkit-box-reflect: below 20px;
}
CSS-Reflexion mit Farbverlauf
Wir können auch einen Fade-Out-Effekt auf der Reflexion erzeugen.
Beispiel
Erstellen Sie einen Ausblendeffekt auf der Reflexion:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}