CSS -Bildreflexion
In diesem Kapitel lernen Sie, wie Sie ein Bild spiegeln.
CSS-Bildreflexionen
Die box-reflectEigenschaft wird verwendet, um eine Bildreflexion zu erstellen.
Der Wert der box-reflectEigenschaft 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-reflectEigenschaft 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));
}