CSS-kép tükröződés

Tartalomjegyzék

Ebben a fejezetben megtudhatja, hogyan kell egy képet tükrözni.

CSS-kép tükröződések

A box-reflect tulajdonság a kép tükröződésének létrehozására szolgál.

A box-reflect tulajdonság értéke a következő lehet:

below
above
left
right

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

A számok, amelyeket a -webkit- követ, azt a verziót adják meg, amelyik elsőként működött a előtag.

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

Példák

Példa

Itt szeretnénk a tükrözést a kép alatt:

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

Próbálja ki Ön is →

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

Példa

Itt szeretnénk a tükrözést a kép jobb oldalán:

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

Próbálja ki Ön is →

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

A kép és a tükröződés közötti távolság megadásához adja hozzá a méretét rés a box-reflect tulajdonsághoz.

Példa

Itt szeretnénk a kép alatti tükrözést, 20 képpontos eltolással:

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

Próbálja ki Ön is →

<!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 tükrözés színátmenettel

A tükrözésen kihalványító hatást is létrehozhatunk.

Példa

Hozzon létre egy elhalványító hatást a tükröződésen:

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

Próbálja ki Ön is →

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