Τρόπος μετάβασης των ιδιοτήτων 'εμφάνιση' + 'αδιαφάνεια' CSS

Βήμα 2: Ορίστε την ιδιότητα 'εμφάνιση'.

Στη συνέχεια, αποκτήστε πρόσβαση στο κοντέινερ div χρησιμοποιώντας το όνομα της κλάσης ' κύριο στοιχείο ' και ρυθμίστε το ' απεικόνιση ” ιδιοκτησία:

Εδώ, η αξία του ' απεικόνιση Η ιδιοκτησία έχει οριστεί ως ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ” για την ανάληψη όλου του πλάτους οθόνης.

Βήμα 3: Προσθήκη εικόνας φόντου

Στη συνέχεια, εφαρμόστε τις ακόλουθες ιδιότητες CSS στο κοντέινερ div στο οποίο έχετε πρόσβαση:

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

• ' ύψος ' και ' πλάτος ” οι ιδιότητες καθορίζουν το μέγεθος του καθορισμένου στοιχείου.
• ' εικόνα φόντου Η ιδιότητα CSS χρησιμοποιείται για την εισαγωγή μιας εικόνας με τη βοήθεια του url() Λειτουργία στο πίσω μέρος του στοιχείου.
• ' αδιαφάνεια ” καθορίζει το επίπεδο αδιαφάνειας για ένα στοιχείο. Το επίπεδο αδιαφάνειας δείχνει το επίπεδο διαφάνειας, όπου ' 1 ' χρησιμοποιείται χωρίς διαφάνεια και ' 0,5 ' είναι για ' πενήντα% 'διαφάνεια.
• ' μετάβαση ' στο CSS επιτρέπει στους χρήστες να αλλάζουν ομαλά τις τιμές ιδιοκτησίας για μια δεδομένη διάρκεια.
• ' περιθώριο ” ορίζει το χώρο έξω από το καθορισμένο όριο γύρω από ένα στοιχείο.

Παραγωγή

Βήμα 4: Εφαρμόστε τον Ψευδοεπιλογέα ':hover'.

Τώρα, αποκτήστε πρόσβαση στο κοντέινερ div κατά μήκος του ' :φτερουγίζω ” ψευδοεπιλογέας που χρησιμοποιείται για την επιλογή στοιχείων όταν τοποθετούμε το ποντίκι πάνω τους:

Στη συνέχεια, ορίστε το ' αδιαφάνεια ' του επιλεγμένου στοιχείου ως ' 1 ” για να αφαιρέσετε τη διαφάνεια.

Παραγωγή

Αυτό αφορά τη ρύθμιση των ιδιοτήτων 'εμφάνιση' και 'αδιαφάνειας' μετάβασης CSS.

συμπέρασμα

Για να ορίσετε τις ιδιότητες μετάβασης 'display' και 'opacity', πρώτα, δημιουργήστε ένα κοντέινερ div χρησιμοποιώντας το στοιχείο