W HTML obrazy sprawiają, że strony są bardziej atrakcyjne i osiągają intencje ludzi. Umożliwia programistom dostosowanie ich stron internetowych za pomocą różnych obrazów. Dodatkowo mogą dodać je bezpośrednio z Internetu, kopiując adres URL pożądanego obrazu, a następnie określając go jako wartość „src”Atrybut wewnątrz znacznika obrazu. Ponadto programiści mogą dodać obraz za pomocą właściwości CSS znanej jako „zdjęcie w tle".

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 dodania obrazu za pomocą adresu URL, który jest wymieniony poniżej:

• Metoda 1: Dodaj obraz za pomocą elementu w HTML
• Metoda 2: Dodaj obraz przy użyciu właściwości CSS w HTML

Metoda 1: Dodaj obraz za pomocą elementu

„„”Element to pojedynczy element pustki, który nie ma treści dziecka i znacznika końcowego. „„src" I "Alt”To dwa kluczowe atrybuty wykorzystywane wewnątrz znacznika„ ”.

Spójrzmy na instrukcje podane poniżej, aby dodać obraz za pomocą elementu!

Krok 1: Zrób kontener DIV

Najpierw utwórz kontener DIV, wykorzystując „”Tag. Następnie wstaw „klasa”Atrybut i przypisz nazwę do klasy zgodnie z pożądaniem.

Krok 2: Wstaw nagłówek

Następnie użyj wymaganego znacznika nagłówka z „

" Do "

”Tag. Na przykład wykorzystamy

Oznacz i dodaj konkretny tekst jako nagłówek wewnątrz tagów otwierających i zamykania.

Krok 3: Dodaj obraz za pomocą adresu URL

Następnie dodaj „„Tag i wstaw poniżej listy atrybutów do znacznika obrazu:

• "src„Atrybut służy do dodawania pliku multimedialnego. W tym celu uruchom żądaną przeglądarkę internetową i skopiuj pożądany adres URL obrazu.
• Następnie określ adres URL jako wartość „src" atrybut.
• Następny, "Alt”Jest wykorzystywany do dodawania nazwy obrazu, gdy nie jest on pokazany z jakiegoś powodu.
• "wysokość”Właściwość określa wysokość elementu zgodnie z daną wartością.
• "szerokość„Wykorzystane do ustawiania szerokości elementu:

Dodaj obraz z adresem URL

Zgodnie z pod względem danych wyjściowych określony obraz został pomyślnie dodany:

Metoda 2: Dodaj obraz przy użyciu 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 kroki poniżej danego poniżej.

Krok 1: Wstaw nagłówek

Najpierw wstaw tekst nagłówki z pomocą

Otwarcie i zamykanie.

Krok 2: Utwórz kontener Div

Następnie utwórz kontener Div, wykorzystując znacznik i dodaj atrybut klasy o jego nazwie:

Dodaj obraz z adresem URL

Krok 3: Pojemnik dostępu

Teraz uzyskaj dostęp do klasy za pośrednictwem selektora kropki „.”I nazwa klasy, która została utworzona wcześniej.

Krok 4: Dodaj obraz za pomocą właściwości CSS „Image w tle”

Następnie zastosuj poniżej listy właściwości CSS, aby dodać obraz z adresu URL w klasie:

.IMG-CONTAINER
Wysokość: 400px;
szerokość: 250px;
Rozmiar tła: zawiera;
Image tła: URL (https: // obrazy.Pexels.COM/Zdjęcia/2260800/Pexels-Photo-2260800.JPEG?auto = kompresja i cs = tinysrgb i w = 1260 i h = 750 i dpr = 1)

W powyższym kodzie:

• "wysokość„Właściwość służy do ustawiania wysokości elementu.
• "szerokość”Służy do określenia wielkości szerokości elementu.
• "Rozmiar tła”Jest wykorzystywany do ustawiania rozmiaru elementu tła.
• "zdjęcie w tle”Właściwość dodaje obraz na odwrocie elementu. W tym odpowiednim celu „URL ()„Funkcja jest wykorzystywana do dodawania obrazu i wklejenia adresu URL obrazu w funkcji„()".

Wyjście

Dowiedziałeś się o różnych metodach dodawania obrazów z adresu URL.

Wniosek

Aby dodać obraz z adresu URL, programiści mogą skorzystać z „”Tag. Następnie wstaw „src”Atrybut i przypisz adres URL jako wartość„ SRC ”. Ponadto użytkownik może dodać obraz z adresu URL za pomocą CSS ”zdjęcie w tle" nieruchomość. W tym zapisie podano metody dodawania obrazu z adresu URL w HTML/CSS.