Αντανάκλαση εικόνας CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Σε αυτό το κεφάλαιο θα μάθετε πώς να αντικατοπτρίζετε μια εικόνα.

Αντανακλάσεις εικόνας CSS

Η ιδιότητα box-reflect χρησιμοποιείται για τη δημιουργία μιας αντανάκλασης εικόνας.

Η τιμή της ιδιότητας box-reflect μπορεί να είναι:

below
above
left
right

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Οι αριθμοί ακολουθούμενοι από -webkit- προσδιορίζουν την πρώτη έκδοση που δούλευε με το α πρόθεμα.

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

Παραδείγματα

Παράδειγμα

Εδώ θέλουμε την αντανάκλαση κάτω από την εικόνα:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Εδώ θέλουμε την αντανάκλαση στα δεξιά της εικόνας:

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

Δοκιμάστε το μόνοι σας →

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

Για να καθορίσετε το κενό μεταξύ της εικόνας και της αντανάκλασης, προσθέστε το μέγεθος του κενό στην ιδιότητα box-reflect.

Παράδειγμα

Εδώ θέλουμε την αντανάκλαση κάτω από την εικόνα, με μετατόπιση 20 px:

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

Δοκιμάστε το μόνοι σας →

<!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 με κλίση

Μπορούμε επίσης να δημιουργήσουμε ένα εφέ εξασθένισης στην αντανάκλαση.

Παράδειγμα

Δημιουργήστε ένα εφέ εξασθένισης στην αντανάκλαση:

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

Δοκιμάστε το μόνοι σας →

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