Możliwość osadzania obrazów w wiadomości, aby pojawić się, gdy użytkownicy przeglądają coś, czyni HTML przydatne do komunikacji e -mail. Ponieważ wszystko jest samodzielne, nie potrzebujesz nigdzie serwera WWW, aby hostować obraz. Użytkownicy mogą osadzić dowolny rodzaj obrazu w dokumencie HTML, czy to w formie .PNG, JPEG i inni.

Ten blog wyjaśni:

• Metoda 1: Jak osadzić „.obraz png ”w HTML z tagiem?
• Metoda 2: Jak osadzić „.Obraz PNG ”w HTML z właściwościami CSS?

Zacznijmy od osadzania .Obraz PNG na stronie HTML!

Metoda 1: Jak osadzić „.obraz png ”w HTML z tagiem?

Do osadzenia .Obraz PNG na stronie HTML, użyj „”Tag. Następnie wstaw „src”Atrybut i dodaj„.png”Obraz jako„src" wartość. Aby uzyskać praktyczne implikacje, wykonaj poniższe kroki.

Krok 1: Wstaw nagłówek

Początkowo użyj HTML „

”Tag, aby dodać nagłówek w dokumencie HTML.

Krok 2: Zaprojektuj kontener DIV

Następnie zaprojektuj kontener Div, dodając „”Element i wstaw klasę lub atrybut ID zgodnie z wyborem. Następnie ustaw wartość tej właściwości do późniejszego użycia.

Krok 3: Dodaj „.Obraz png ”

Teraz użyj „”Tag, aby dodać dowolny typ pliku multimediów do strony HTML. Aby to zrobić, „src”Atrybut został dodany do„”Tag i dodam obraz PNG jako„src" wartość. Ponadto możesz zastosować styl, używając inline ”styl”Atrybut i ustawianie właściwości CSS, które chcesz zastosować:

Osadzać .Obraz PNG

Można zauważyć, że określony obraz został pomyślnie osadzony:

Metoda 2: Jak osadzić „.Obraz PNG ”w HTML z właściwościami CSS?

Osadzać „.png”Obraz na stronie HTML za pomocą właściwości CSS,„zdjęcie w tle„Własność można wykorzystać. Aby uzyskać praktyczne implikacje, wypróbuj podane instrukcje.

Krok 1: Dodaj nagłówek

W HTML dodaj nagłówek za pomocą znacznika nagłówka z „

" Do "

”Tag.

Krok 2: Utwórz pojemnik „Div”

Następnie użyj „„Tag do utworzenia kontenera Div w dokumencie HTML:

Osadzać .Obraz PNG

Wyjście

Krok 3: Dodaj „.Obraz png ”

Uzyskaj dostęp do kontenera Div za pomocą selektora atrybutów z określoną wartością atrybutu jako „.Div-img”:

.Div-img
Wysokość: 50%PX;
Szerokość: 50%PX;
Rozmiar tła: zawiera;
Image tła: URL (/sprężynowe.PNG)

Następnie zastosuj te właściwości CSS:

• "wysokość i szerokość„Właściwości są wykorzystywane do ustawiania wielkości podanego elementu
• "Rozmiar tła”Określa rozmiar obrazu tła. W tym celu wartość tej właściwości jest ustalana jako „zawierać".
• "zdjęcie w tle”Wkłada obraz za pomocą„URL ()”Funkcja.

Wyjście

Chodzi o osadzenie „.png”Obraz na stronie HTML.

Wniosek

Osadzać „.png”Obraz na stronie HTML,„”Tag jest wykorzystywany. Następnie dodaj „src”Atrybut i wstaw„ „.png”Obraz jako wartość„src". Możesz także skorzystać z „zdjęcie w tle„Własność CSS, aby dodać„.png”Obraz na stronie HTML. Ten samouczek pokazał wszystko o osadzeniu .Obraz PNG na stronie HTML.