Ten post krótko wyjaśni metodę dodawania obrazu z adresu URL.
Jak dodać obraz z adresu URL w HTML/CSS?
W HTML/CSS dostępne są dwie metody dodawania obrazu przy użyciu adresu URL, który jest wymieniony poniżej:
- Metoda 1: Dodaj obraz za pomocą elementu
w HTML
- Metoda 2: Dodaj obraz za pomocą właściwości CSS w HTML
Metoda 1: Dodaj obraz za pomocą elementu ![]()
„ ”.
Spójrzmy na poniższe instrukcje dodawania obrazu za pomocą elementu !
Krok 1: Utwórz kontener div
Najpierw utwórz kontener div, używając „
Krok 2: Wstaw nagłówek
Następnie użyj wymaganego tagu nagłówka z „ ' do ' ”znacznik. Na przykład użyjemy znacznika
i dodamy określony tekst jako nagłówek wewnątrz znaczników otwierających i zamykających.
Krok 3: Dodaj obraz za pomocą adresu URL
Krok 3: Dodaj obraz za pomocą adresu URL
Następnie dodaj „
- “ źródło Atrybut ” służy do dodawania pliku multimedialnego. W tym celu uruchom żądaną przeglądarkę internetową i skopiuj żądany adres URL obrazu.
- Następnie określ adres URL jako wartość „ źródło ' atrybut.
- Następny, ' wszystko ” służy do dodawania nazwy obrazu, gdy z jakiegoś powodu nie jest on wyświetlany.
- “ Wysokość ” określa wysokość elementu według podanej wartości.
- “ szerokość ” służy do ustawienia szerokości elementu:
< h2 > Dodaj obraz z adresem URL < / h2 >
< img źródło = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' wszystko = 'Obraz!' Wysokość = „400 pikseli” szerokość = „300 pikseli” / >
< / dz >
Zgodnie z poniższymi danymi wyjściowymi określony obraz został pomyślnie dodany:
Metoda 2: Dodaj obraz za pomocą właściwości CSS w HTML
Deweloperzy mogą również dodać obraz z adresu URL za pomocą CSS „ zdjęcie w tle CSS. w tym celu wykonaj poniższe czynności.
Krok 1: Wstaw nagłówek
Najpierw wstaw tekst nagłówka za pomocą znacznika otwierającego i zamykającego
.
Krok 2: Utwórz kontener div
Następnie utwórz kontener div, używając znacznika
Krok 3: Uzyskaj dostęp do kontenera
Teraz uzyskaj dostęp do klasy za pomocą selektora kropek „ . ” i nazwa klasy, która została wcześniej utworzona.
Krok 4: Dodaj obraz za pomocą właściwości CSS „obraz tła”.
Następnie zastosuj poniższe właściwości CSS, aby dodać obraz z adresu URL wewnątrz klasy:
.img-kontener {Wysokość : 400 pikseli ;
szerokość : 250 pikseli ;
rozmiar tła : zawierać ;
Zdjęcie w tle : adres URL ( https : //zdjęcia .pexels .com/zdjęcia/ 2260800 /pexels-foto- 2260800 .jpeg? automatyczny = skompresuj&cs = tinysrgb&w = 1260 &h = 750 &dpr = jeden )
}
W powyższym kodzie:
- “ Wysokość ” służy do ustawiania wysokości elementu.
- “ szerokość ” służy do określenia rozmiaru szerokości elementu.
- “ rozmiar tła ” służy do ustawiania rozmiaru elementu tła.
- “ zdjęcie w tle ” dodaje obraz z tyłu elementu. W tym celu „ URL() ” służy do dodawania obrazu i wklejania adresu URL obrazu w funkcji „ () ”.
Wyjście
Poznałeś różne metody dodawania obrazów z adresu URL.
Wniosek
Aby dodać obraz z adresu URL, programiści mogą skorzystać z „