CSS-Bildreflexion


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


In diesem Kapitel erfahren Sie, wie Sie ein Bild spiegeln.


CSS-Bildreflexionen

Die Eigenschaft box-reflect wird zum Erstellen einer Bildspiegelung verwendet.

Der Wert der Eigenschaft box-reflect kann sein:

below
above
left
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 a funktionierte Präfix.

Property
box-reflect 4.0 -webkit- 79.0 -webkit- Not supported 4.0 -webkit- 15.0 -webkit-


Beispiele

Beispiel

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>


Beispiel

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>



CSS-Reflexionsversatz

Um die Lücke zwischen dem Bild und der Reflexion anzugeben, addieren Sie die Größe des Lücke zur Eigenschaft box-reflect.

Beispiel

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>



CSS-Reflexion mit Farbverlauf

Wir können auch einen Ausblendeffekt auf der Reflexion erzeugen.

Beispiel

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>