CSS-bildreflektion


Innehållsförteckning

    Visa innehållsförteckning


I det här kapitlet kommer du att lära dig hur du reflekterar en bild.


CSS-bildreflektioner

Egenskapen box-reflect används för att skapa en bildreflektion.

Värdet på egenskapen box-reflect kan vara:

below
above
left
right

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.

Siffror följt av -webkit- anger den första versionen som fungerade med a prefix.

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


Exempel

Exempel

Här vill vi ha reflektionen under bilden:

  img {
  -webkit-box-reflect: below;
} 

Prova själv →

<!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>


Exempel

Här vill vi ha reflektionen till höger om bilden:

  img {
  -webkit-box-reflect: right;
} 

Prova själv →

<!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 Reflection Offset

För att ange gapet mellan bilden och reflektionen, lägg till storleken på gap till egenskapen box-reflect.

Exempel

Här vill vi ha reflektionen under bilden, med en 20px offset:

  img {
  -webkit-box-reflect: below 20px;
} 

Prova själv →

<!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-reflektion med lutning

Vi kan också skapa en uttoningseffekt på reflektionen.

Exempel

Skapa en uttoningseffekt på reflektionen:

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
} 

Prova själv →

<!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>