Αδιαφάνεια/Διαφάνεια εικόνας CSS

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

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

Η ιδιότητα αδιαφάνεια καθορίζει την αδιαφάνεια/διαφάνεια ενός στοιχείου.

Διαφανής εικόνα

Η ιδιότητα αδιαφάνεια μπορεί να πάρει τιμή από 0,0 - 1,0. Όσο χαμηλότερη είναι η τιμή, τόσο πιο διαφανές:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

Παράδειγμα

img {
  opacity: 0.5;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

Διαφανές εφέ αιώρησης

Η ιδιότητα αδιαφάνεια χρησιμοποιείται συχνά μαζί με τον επιλογέα :hover για αλλαγή της αδιαφάνειας κατά την τοποθέτηση του ποντικιού:

Northern Lights
Mountains
Italy

Παράδειγμα

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

Το παράδειγμα εξηγείται

Το πρώτο μπλοκ CSS είναι παρόμοιο με τον κώδικα στο Παράδειγμα 1. Επιπλέον, έχουμε προσθέσει τι πρέπει να συμβεί όταν ένας χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από μία από τις εικόνες. Σε αυτήν την περίπτωση θέλουμε η εικόνα να ΜΗΝ είναι διαφανής όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού πάνω της. Το CSS για αυτό είναι opacity:1;.

Όταν ο δείκτης του ποντικιού απομακρυνθεί από την εικόνα, η εικόνα θα είναι ξανά διαφανής.

Ένα παράδειγμα αντίστροφου εφέ αιώρησης:

Northern Lights
Mountains
Italy

Παράδειγμα

img:hover {
  opacity: 0.5;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

Διαφανές κουτί

Όταν χρησιμοποιείτε την ιδιότητα αδιαφάνεια για να προσθέσετε διαφάνεια στο φόντο ενός στοιχείου, όλα τα θυγατρικά του στοιχεία κληρονομούν την ίδια διαφάνεια. Αυτό μπορεί να κάνει το κείμενο μέσα σε ένα πλήρως διαφανές στοιχείο δυσανάγνωστο:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Παράδειγμα

div {
  opacity: 0.3;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #04AA6D;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Διαφάνεια με χρήση RGBA

Εάν δεν θέλετε να εφαρμόσετε αδιαφάνεια σε θυγατρικά στοιχεία, όπως στο παραπάνω παράδειγμά μας, χρησιμοποιήστε τιμές χρώματος RGBA. Το παρακάτω παράδειγμα ορίζει την αδιαφάνεια για το χρώμα του φόντου και όχι για το κείμενο:

100% opacity

60% opacity

30% opacity

10% opacity

Μάθατε από το Κεφάλαιό μας για τα χρώματα CSS, ότι μπορείτε να χρησιμοποιήσετε το RGB ως τιμή χρώματος. Εκτός από το RGB, μπορείτε να χρησιμοποιήσετε μια τιμή χρώματος RGB με ένα κανάλι άλφα (RGBA) - το οποίο καθορίζει την αδιαφάνεια για ένα χρώμα.

Μια τιμή χρώματος RGBA καθορίζεται με: rgba(κόκκινο, πράσινο, μπλε, άλφα). ο Η παράμετρος alpha είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανές) και 1,0 (πλήρως αδιαφανής).

Συμβουλή: Θα μάθετε περισσότερα για τα χρώματα RGBA στο Κεφάλαιο Χρώματα CSS.

Παράδειγμα

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% 
opacity */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(4, 170, 109);
  padding: 10px;
}

div.first {
  background: rgba(4, 170, 109, 0.1);
}

div.second {
  background: rgba(4, 170, 109, 0.3);
}

div.third {
  background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

Κείμενο σε διαφανές πλαίσιο

This is some text that is placed in the transparent box.

Παράδειγμα

<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Το παράδειγμα εξηγείται

Αρχικά, δημιουργούμε ένα στοιχείο <div> (class="background") με εικόνα φόντου και περίγραμμα.

Στη συνέχεια δημιουργούμε ένα άλλο <div> (class="transbox") μέσα στο πρώτο <div>.

ο Το <div class="transbox"> έχει χρώμα φόντου και περίγραμμα - το div είναι διαφανές.

Μέσα στο διάφανο <div>, προσθέτουμε λίγο κείμενο μέσα σε ένα στοιχείο <p>.