In diesem Kapitel erfahren Sie, wie Sie ein Bild spiegeln.
Die Eigenschaft box-reflect
wird zum Erstellen einer Bildspiegelung verwendet.
Der Wert der Eigenschaft box-reflect
kann sein:
below above left right
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 a funktionierte Präfix.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Hier wollen wir die Spiegelung unter dem Bild:
img {
-webkit-box-reflect: below;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: below;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection below the image:</p>
<img src="img_tree.png">
</body>
</html>
Hier wollen wir die Spiegelung rechts vom Bild:
img {
-webkit-box-reflect: right;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: right;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">
</body>
</html>
Um die Lücke zwischen dem Bild und der Reflexion anzugeben, addieren Sie die Größe des Lücke zur Eigenschaft box-reflect
.
Hier möchten wir die Spiegelung unter dem Bild mit einem Versatz von 20 Pixeln:
img {
-webkit-box-reflect: below 20px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: below 20px;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">
</body>
</html>
Wir können auch einen Ausblendeffekt auf der Reflexion erzeugen.
Erstellen Sie einen Ausblendeffekt für die Reflexion:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">
</body>
</html>