CSS billedrefleksion

Indholdsfortegnelse

    Vis indholdsfortegnelse

I dette kapitel lærer du, hvordan du afspejler et billede.

CSS billedrefleksioner

Egenskaben box-reflect bruges til at skabe en billedreflektion.

Værdien af egenskaben box-reflect kan være:

below
above
left
right

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal efterfulgt af -webkit- angiver den første version, der fungerede med en præfiks.

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

Eksempler

Eksempel

Her ønsker vi refleksionen under billedet:

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

Prøv det selv →

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

Eksempel

Her ønsker vi refleksionen til højre for billedet:

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

Prøv det selv →

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

For at angive afstanden mellem billedet og refleksionen skal du tilføje størrelsen på hul til egenskaben box-reflect.

Eksempel

Her ønsker vi refleksionen under billedet, med en 20px offset:

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

Prøv det selv →

<!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-refleksion med gradient

Vi kan også skabe en fade-out effekt på refleksionen.

Eksempel

Skab en fade-out effekt på refleksionen:

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

Prøv det selv →

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