Αυτή η ανάρτηση θα εξηγήσει εν συντομία τη μέθοδο για την προσθήκη της εικόνας από μια διεύθυνση URL.
Πώς να προσθέσετε μια εικόνα από μια διεύθυνση URL σε HTML/CSS;
Στο HTML/CSS, δύο μέθοδοι είναι διαθέσιμες για να προσθέσετε μια εικόνα χρησιμοποιώντας τη διεύθυνση URL, η οποία παρατίθεται παρακάτω:
- Μέθοδος 1: Προσθήκη εικόνας χρησιμοποιώντας ένα στοιχείο σε HTML
- Μέθοδος 2: Προσθήκη εικόνας με χρήση ιδιοτήτων CSS σε HTML
Μέθοδος 1: Προσθήκη εικόνας χρησιμοποιώντας το στοιχείο
Ο ' Το στοιχείο είναι ένα μεμονωμένο κενό στοιχείο που δεν έχει θυγατρικό περιεχόμενο και ετικέτα λήξης. Ο ' src ' και ' τα παντα ' είναι δύο βασικά χαρακτηριστικά που χρησιμοποιούνται μέσα στην ετικέτα ' '.
Ας δούμε τις παρακάτω οδηγίες για να προσθέσουμε μια εικόνα χρησιμοποιώντας το στοιχείο !
Βήμα 1: Δημιουργήστε ένα κοντέινερ div
Πρώτα, δημιουργήστε ένα κοντέινερ div χρησιμοποιώντας το ' Στη συνέχεια, χρησιμοποιήστε την απαιτούμενη ετικέτα επικεφαλίδας από ' ' προς την ' ετικέτα '. Για παράδειγμα, θα χρησιμοποιήσουμε την ετικέτα Μετά από αυτό, προσθέστε ένα ' Κάντε ετικέτα και εισαγάγετε τα παρακάτω χαρακτηριστικά μέσα στην ετικέτα εικόνας: Σύμφωνα με το παρακάτω αποτέλεσμα, η καθορισμένη εικόνα προστέθηκε με επιτυχία: Οι προγραμματιστές μπορούν επίσης να προσθέσουν την εικόνα από μια διεύθυνση URL χρησιμοποιώντας το CSS ' εικόνα φόντου ” CSS. για το σκοπό αυτό, ακολουθήστε τα παρακάτω βήματα. Πρώτα, εισαγάγετε ένα κείμενο επικεφαλίδας με τη βοήθεια της ετικέτας ανοίγματος και κλεισίματος Στη συνέχεια, δημιουργήστε ένα κοντέινερ div χρησιμοποιώντας την ετικέτα Τώρα, αποκτήστε πρόσβαση στην τάξη μέσω του επιλογέα κουκκίδων ' . ” και το όνομα της κλάσης που δημιουργήθηκε προηγουμένως. Μετά από αυτό, εφαρμόστε τις παρακάτω ιδιότητες CSS για να προσθέσετε την εικόνα από μια διεύθυνση URL εντός της κλάσης: Στον παραπάνω κωδικό: Παραγωγή Έχετε μάθει για τις διαφορετικές μεθόδους για την προσθήκη εικόνων από μια διεύθυνση URL. Για να προσθέσετε μια εικόνα από μια διεύθυνση URL, οι προγραμματιστές μπορούν να χρησιμοποιήσουν το ' ετικέτα '. Στη συνέχεια, εισάγετε το ' src ” και αντιστοιχίστε τη διεύθυνση URL ως τιμή “src”. Επιπλέον, ο χρήστης μπορεί να προσθέσει μια εικόνα από τη διεύθυνση URL χρησιμοποιώντας το CSS ' εικόνα φόντου ” ιδιοκτησία. Αυτή η εγγραφή έχει δηλώσει τις μεθόδους για την προσθήκη της εικόνας από τη διεύθυνση URL σε HTML/CSS.
Βήμα 2: Εισαγωγή Επικεφαλίδας
και θα προσθέσουμε το συγκεκριμένο κείμενο ως επικεφαλίδα μέσα στις ετικέτες ανοίγματος και κλεισίματος.
Βήμα 3: Προσθέστε μια εικόνα χρησιμοποιώντας τη διεύθυνση URL
< div τάξη = 'img-conatiner' >
< h2 > Προσθήκη εικόνας με διεύθυνση URL < / h2 >
< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' τα παντα = 'Εικόνα!' ύψος = '400px' πλάτος = '300px' / >
< / div >
Μέθοδος 2: Προσθήκη εικόνας με χρήση ιδιοτήτων CSS σε HTML
Βήμα 1: Εισαγάγετε την επικεφαλίδα
.
Βήμα 2: Δημιουργήστε το κοντέινερ div
> Προσθήκη εικόνας με διεύθυνση URL
>
Βήμα 3: Πρόσβαση στο κοντέινερ
Βήμα 4: Προσθήκη εικόνας χρησιμοποιώντας την ιδιότητα CSS 'background-image'.
ύψος : 400 εικονοστοιχεία ;
πλάτος : 250 εικονοστοιχεία ;
μέγεθος φόντου : περιέχω ;
Εικόνα φόντου : url ( https : //εικόνες .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg; αυτο = συμπίεση&c = tinysrgb&w = 1260 &h = 750 &dpr = ένας )
}
συμπέρασμα