Αυτή η ανάρτηση εξηγεί σχετικά με τη σύνταξη λεζάντας κάτω από μια εικόνα.
Πώς να γράψετε μια λεζάντα κάτω από μια εικόνα;
Για να γράψετε μια λεζάντα κάτω από μια εικόνα, θα παρέχουμε διάφορες μεθόδους που αναφέρονται παρακάτω:
- Μέθοδος 1: Πώς να προσθέσετε λεζάντα εικόνας χρησιμοποιώντας HTML '
' Στοιχείο? - Μέθοδος 2: Πώς να προσθέσετε λεζάντα εικόνας χρησιμοποιώντας ' ' Στοιχείο?
Μέθοδος 1: Πώς να προσθέσετε λεζάντα εικόνας χρησιμοποιώντας το στοιχείο '
' HTML; Για να προσθέσετε μια λεζάντα εικόνας, ακολουθήστε τις παρακάτω οδηγίες:
- Πρώτα, προσθέστε το ' <σχήμα> ' στοιχείο, το οποίο χρησιμοποιείται για την αναπαράσταση αυτοτελούς περιεχομένου, ενδεχομένως με προαιρετική λεζάντα.
- Στη συνέχεια, εισαγάγετε ένα '
'Ετικέτα μέσα στην παράγραφο' ετικέτα '. Προσθέστε την εικόνα χρησιμοποιώντας το ' src ' Χαρακτηριστικό. Ο ' τα παντα Η ιδιότητα ' εμφανίζει το περιεχόμενο που προστέθηκε εάν η εικόνα δεν εμφανιζόταν για κάποιο λόγο.
- Ορίστε το πλάτος της εικόνας ως ' 200 px '.
- Μετά το '
Η ετικέτα ' χρησιμοποιείται για την προσθήκη της λεζάντας για την εικόνα. Επιπλέον, προσθέστε τη λεζάντα ανάμεσα στις ετικέτες « »:
<σελ >= 'TSL.png' τα παντα = 'Δημιουργοί περιεχομένου TSL' πλάτος = '200' >
>Μπορείτε να δείτε ότι έχει εμφανιστεί η εικόνα με την καθορισμένη λεζάντα:
Τώρα, προχωρήστε στη δεύτερη μέθοδο για την προσθήκη της λεζάντας χρησιμοποιώντας CSS.
Μέθοδος 2: Πώς να προσθέσετε λεζάντα εικόνας χρησιμοποιώντας το στοιχείο '
';Για να προσθέσετε τη λεζάντα της εικόνας χρησιμοποιώντας το '
στοιχείο ', δοκιμάστε τις οδηγίες που δίνονται:
- Δημιουργώ ένα ' ' κοντέινερ και προσθέστε ένα χαρακτηριστικό κλάσης με το όνομα ' κάτοχος εικόνας '.
- Προσθήκη ετικέτας επικεφαλίδας ' ” για την εισαγωγή της επικεφαλίδας και το στυλ της επικεφαλίδας σύμφωνα με την επιλογή σας.
- Προσθέστε ένα άλλο στοιχείο '
' και εισαγάγετε ένα '' tag μαζί με ' src », « τα παντα ' και ' πλάτος ” χαρακτηριστικά μεταξύ του κοντέινερ div.
- Προσθέστε ένα τρίτο '
' με το όνομα της τάξης ' img-caption '. Στη συνέχεια, δώστε τη λεζάντα ανάμεσα στις ετικέτες ''. Επιπλέον, το «
Το στοιχείο ' χρησιμοποιείται για την προσθήκη μιας αλλαγής γραμμής:= 'κάτοχος εικόνας' >
στυλ
<διαιρ >
= 'TSL.png' τα παντα = 'Δημιουργοί περιεχομένου TSL' πλάτος = '200' >
= 'img-caption' >
>
>Μπορεί να παρατηρηθεί ότι η λεζάντα για την εικόνα έχει προστεθεί με επιτυχία:
Τώρα, ας προχωρήσουμε προς την ενότητα CSS για την εφαρμογή των ιδιοτήτων.
Στυλ '.image-holder' σε CSS
Πρώτα, αποκτήστε πρόσβαση στο '
'στοιχείο που έχει κλάση' .εικόνα-κάτοχος '. Στη συνέχεια, εφαρμόστε τις ακόλουθες ιδιότητες CSS: .εικόνα-κάτοχος {
θέση : συγγενής ;
ύψος : 100 εικονοστοιχεία ;
πλάτος : 200 px ;
περιθώριο : αυτο ;
}Οι λεπτομέρειες των παραπάνω αναφερόμενων ιδιοτήτων περιγράφονται παρακάτω:
- Ο ' θέση Το ' έχει οριστεί ως ' συγγενής ” για να καθορίσετε την αρχική θέση ενός στοιχείου που παραμένει στη ροή του εγγράφου, όπως ακριβώς και η στατική τιμή.
- Τότε, ' ύψος ' χρησιμοποιείται για τον καθορισμό του ύψους του στοιχείου.
- Ο ' πλάτος Η ιδιότητα ” προσδιορίζει το μέγεθος του στοιχείου σε πλάτος.
- Ο ' περιθώριο Το ' έχει οριστεί ως ' αυτο ” για να ορίσετε αυτόματα το χώρο γύρω από το στοιχείο.
Λεζάντα στυλ σε CSS
Σε αυτό το βήμα, θα έχουμε πρόσβαση στις δύο τάξεις με το όνομα ' κάτοχος εικόνας ' και ' img-caption ” και εφαρμόστε τις ακόλουθες ιδιότητες CSS:
.εικόνα-κάτοχος .img-caption {
θέση : απόλυτος ;
στοίχιση κειμένου : κέντρο ;
βάρος γραμματοσειράς : τολμηρός ;
πλάτος : 200 px ;
ύψος : 50 εικονοστοιχεία ;
αριστερά : 0 εικονοστοιχεία ;
χρώμα : #f80909 ;
Ιστορικό : rgb ( 140 , 166 , 253 ) ;
}Η περιγραφή των προαναφερόμενων ιδιοκτησιών έχει ως εξής:
- Ο ' στοίχιση κειμένου 'η ιδιοκτησία έχει οριστεί ως ' κέντρο ” για ευθυγράμμιση της θέσης κειμένου στο κέντρο.
- Επόμενο, ' βάρος γραμματοσειράς ' κατανέμεται ως ' τολμηρός ” για να ορίσετε τη γραμματοσειρά της λεζάντας της εικόνας.
- Μετά το ' χρώμα Η ιδιότητα ' χρησιμοποιείται για τον καθορισμό του χρώματος του στοιχείου στο οποίο έχει προσπελαστεί.
- Ο ' Ιστορικό Η ιδιότητα ” ορίζει το χρώμα του φόντου του στοιχείου.
- Άλλα ακίνητα, συμπεριλαμβανομένων ' θέση », « ύψος ', και ' πλάτος ” χρησιμοποιούνται επίσης για την εφαρμογή των αντίστοιχων λειτουργιών.
Παραγωγή
Έχουμε συζητήσει τις μεθόδους για τη σύνταξη της λεζάντας κάτω από μια εικόνα.
συμπέρασμα
Για να γράψουν μια λεζάντα κάτω από μια εικόνα, οι χρήστες μπορούν είτε να χρησιμοποιήσουν το '
'στοιχείο ή ένα απλό' ” δοχείο. Για να χρησιμοποιήσετε το '', πρώτα προσθέστε το ' ' στοιχείο για την ενσωμάτωση της εικόνας μέσα στο ' <σχήμα> ', στη συνέχεια, χρησιμοποιήστε το στοιχείο '
' και προσθέστε μια λεζάντα μεταξύ των ετικετών του. Στη δεύτερη προσέγγιση, οι χρήστες μπορούν απλώς να χρησιμοποιήσουν το ' ' και εφαρμόστε διαφορετικές ιδιότητες CSS για να ωραιοποιήσετε τη λεζάντα. Αυτή η ανάρτηση έχει δείξει τις μεθόδους για τη σύνταξη της λεζάντας κάτω από μια εικόνα.