Αδιαφάνεια/διαφάνεια CSS

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

διαφανείς εικόνες

διαφάνεια Η τιμή της ιδιότητας opacity είναι μεταξύ 0.0 και 1.0. Η μικρότερη τιμή, η πιο διαφανής είναι:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

διαφάνεια 1

παράδειγμα

img {
  διαφάνεια: 0.5;
}

Try it yourself

διαφανή εφέ ανασκόπησης

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

Tulip
Tulip
Flower

παράδειγμα

img {
  διαφάνεια: 0.5;
}
img:hover {
  opacity: 1.0;
}

Try it yourself

Example explanation

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

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

Παράδειγμα αντίθετης διαφάνειας:

Tulip
Tulip
Flower

παράδειγμα

img:hover {
  διαφάνεια: 0.5;
}

Try it yourself

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

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

διαφάνεια 1
διαφάνεια 0.6
διαφάνεια 0.3
διαφάνεια 0.1

παράδειγμα

div {
  διαφάνεια: 0.3;
}

Try it yourself

Χρήση διαφάνειας RGBA

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

100% διαφάνεια
60% διαφάνεια
30% διαφάνεια
10% διαφάνεια

Έχετε μάθει από το CSS 颜色 Σε αυτό το κεφάλαιο μάθαμε πώς να χρησιμοποιούμε το RGB ως τιμή χρώματος. Εκτός από RGB, μπορείτε επίσης να χρησιμοποιήσετε το RGB χρώμα με τον αλφα κανάλου (RGBA) - αυτός ο κανάλου καθορίζει τη διαφάνεια του χρώματος.

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

Σuggestion:Θα μάθετε στα CSS 颜色 Σε αυτό το κεφάλαιο μάθαμε περισσότερα για το RGBA χρώμα.

παράδειγμα

div {
  υπόβαθρο: rgba(76, 175, 80, 0.3) /* Διαφάνεια 30% πράσινο υποβάθρο */
}

Try it yourself

Κείμενα στο διαφανές κουτί

Αυτό είναι μερικά κείμενα που βρίσκονται σε διαφανή κουτί.

παράδειγμα

<html>
<head>
<style>
div.background {
  υπόβαθρο: url(klematis.jpg) επανάληψη;
  περιθώριο: 2px αλυσίδα μαύρη;
}
div.transbox {
  μακρύτερος: 30px;
  χρώμα υποβάθρου: #ffffff;
  περιθώριο: 1px αλυσίδα μαύρη;
  διαφάνεια: 0.6;
}
div.transbox p {
  μακρύτερος: 5%;
  βαρύτητα γραμμάτων: δίκαιο;
  χρώμα: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>This is some text located inside a transparent box.</p>
  </div>
</div>
</body>
</html>

Try it yourself

Example explanation

Firstly, we create a <div> element with a background image and border (class="background").

Then, we create another <div> (class="transbox") inside the first <div>.

<div class="transbox"> has a background color and border - this div is transparent.

Inside a transparent <div>, we added some text within the <p> element.