Προσθήκη εικόνας από διεύθυνση URL – HTML

Prostheke Eikonas Apo Dieuthynse Url Html



Στην HTML, οι εικόνες κάνουν τους ιστότοπους πιο ελκυστικούς και επιτυγχάνουν τις προθέσεις των ανθρώπων. Επιτρέπει στους προγραμματιστές να προσαρμόσουν τις ιστοσελίδες τους με διαφορετικές εικόνες. Επιπλέον, μπορούν να τα προσθέσουν απευθείας από το Διαδίκτυο αντιγράφοντας τη διεύθυνση URL της επιθυμητής εικόνας και στη συνέχεια προσδιορίζοντάς την ως την τιμή του ' src ” χαρακτηριστικό μέσα στην ετικέτα εικόνας. Επιπλέον, οι προγραμματιστές μπορούν να προσθέσουν την εικόνα με τη βοήθεια της ιδιότητας CSS που είναι γνωστή ως ' εικόνα φόντου '.

Αυτή η ανάρτηση θα εξηγήσει εν συντομία τη μέθοδο για την προσθήκη της εικόνας από μια διεύθυνση URL.

Πώς να προσθέσετε μια εικόνα από μια διεύθυνση URL σε HTML/CSS;

Στο HTML/CSS, δύο μέθοδοι είναι διαθέσιμες για να προσθέσετε μια εικόνα χρησιμοποιώντας τη διεύθυνση URL, η οποία παρατίθεται παρακάτω:







Μέθοδος 1: Προσθήκη εικόνας χρησιμοποιώντας το στοιχείο

Ο ' Το στοιχείο είναι ένα μεμονωμένο κενό στοιχείο που δεν έχει θυγατρικό περιεχόμενο και ετικέτα λήξης. Ο ' src ' και ' τα παντα ' είναι δύο βασικά χαρακτηριστικά που χρησιμοποιούνται μέσα στην ετικέτα ' '.



Ας δούμε τις παρακάτω οδηγίες για να προσθέσουμε μια εικόνα χρησιμοποιώντας το στοιχείο !



Βήμα 1: Δημιουργήστε ένα κοντέινερ div

Πρώτα, δημιουργήστε ένα κοντέινερ div χρησιμοποιώντας το '

ετικέτα '. Στη συνέχεια, εισάγετε το ' τάξη ” αποδώστε και ορίστε ένα όνομα στην τάξη ανάλογα με την επιθυμία.





Βήμα 2: Εισαγωγή Επικεφαλίδας

Στη συνέχεια, χρησιμοποιήστε την απαιτούμενη ετικέτα επικεφαλίδας από '

' προς την '
ετικέτα '. Για παράδειγμα, θα χρησιμοποιήσουμε την ετικέτα

και θα προσθέσουμε το συγκεκριμένο κείμενο ως επικεφαλίδα μέσα στις ετικέτες ανοίγματος και κλεισίματος.


Βήμα 3: Προσθέστε μια εικόνα χρησιμοποιώντας τη διεύθυνση URL

Μετά από αυτό, προσθέστε ένα ' Κάντε ετικέτα και εισαγάγετε τα παρακάτω χαρακτηριστικά μέσα στην ετικέτα εικόνας:



  • ' src Το χαρακτηριστικό ' χρησιμοποιείται για την προσθήκη του αρχείου πολυμέσων. Για το σκοπό αυτό, εκκινήστε το πρόγραμμα περιήγησης ιστού που θέλετε και αντιγράψτε τη διεύθυνση URL της εικόνας που θέλετε.
  • Στη συνέχεια, καθορίστε τη διεύθυνση URL ως τιμή του ' src ' Χαρακτηριστικό.
  • Επόμενο, ' τα παντα ' χρησιμοποιείται για την προσθήκη ονόματος για την εικόνα όταν δεν εμφανίζεται για κάποιο λόγο.
  • ' ύψος Η ιδιότητα ” προσδιορίζει το ύψος του στοιχείου σύμφωνα με τη δεδομένη τιμή.
  • ' πλάτος Χρησιμοποιείται για τη ρύθμιση του πλάτους του στοιχείου:
< 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

Οι προγραμματιστές μπορούν επίσης να προσθέσουν την εικόνα από μια διεύθυνση URL χρησιμοποιώντας το CSS ' εικόνα φόντου ” CSS. για το σκοπό αυτό, ακολουθήστε τα παρακάτω βήματα.

Βήμα 1: Εισαγάγετε την επικεφαλίδα

Πρώτα, εισαγάγετε ένα κείμενο επικεφαλίδας με τη βοήθεια της ετικέτας ανοίγματος και κλεισίματος

.

Βήμα 2: Δημιουργήστε το κοντέινερ div

Στη συνέχεια, δημιουργήστε ένα κοντέινερ div χρησιμοποιώντας την ετικέτα

και προσθέστε ένα χαρακτηριστικό κλάσης με το όνομά του:

> Προσθήκη εικόνας με διεύθυνση URL >

= 'img-container' > >

Βήμα 3: Πρόσβαση στο κοντέινερ

Τώρα, αποκτήστε πρόσβαση στην τάξη μέσω του επιλογέα κουκκίδων ' . ” και το όνομα της κλάσης που δημιουργήθηκε προηγουμένως.

Βήμα 4: Προσθήκη εικόνας χρησιμοποιώντας την ιδιότητα CSS 'background-image'.

Μετά από αυτό, εφαρμόστε τις παρακάτω ιδιότητες CSS για να προσθέσετε την εικόνα από μια διεύθυνση URL εντός της κλάσης:

.img-container {

ύψος : 400 εικονοστοιχεία ;

πλάτος : 250 εικονοστοιχεία ;

μέγεθος φόντου : περιέχω ;

Εικόνα φόντου : url ( https : //εικόνες .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg; αυτο = συμπίεση&c = tinysrgb&w = 1260 &h = 750 &dpr = ένας )

}

Στον παραπάνω κωδικό:

  • ' ύψος Η ιδιότητα ” χρησιμοποιείται για τη ρύθμιση του ύψους του στοιχείου.
  • ' πλάτος ' χρησιμοποιείται για τον καθορισμό του μεγέθους του πλάτους του στοιχείου.
  • ' μέγεθος φόντου ' χρησιμοποιείται για τον καθορισμό του μεγέθους του στοιχείου φόντου.
  • ' εικόνα φόντου Η ιδιότητα ' προσθέτει μια εικόνα στο πίσω μέρος του στοιχείου. Για τον αντίστοιχο σκοπό, το « url() 'Η λειτουργία χρησιμοποιείται για την προσθήκη της εικόνας και την επικόλληση της διεύθυνσης URL της εικόνας στη συνάρτηση ' () '.

Παραγωγή

Έχετε μάθει για τις διαφορετικές μεθόδους για την προσθήκη εικόνων από μια διεύθυνση URL.

συμπέρασμα

Για να προσθέσετε μια εικόνα από μια διεύθυνση URL, οι προγραμματιστές μπορούν να χρησιμοποιήσουν το ' ετικέτα '. Στη συνέχεια, εισάγετε το ' src ” και αντιστοιχίστε τη διεύθυνση URL ως τιμή “src”. Επιπλέον, ο χρήστης μπορεί να προσθέσει μια εικόνα από τη διεύθυνση URL χρησιμοποιώντας το CSS ' εικόνα φόντου ” ιδιοκτησία. Αυτή η εγγραφή έχει δηλώσει τις μεθόδους για την προσθήκη της εικόνας από τη διεύθυνση URL σε HTML/CSS.