Heim >Web-Frontend >HTML-Tutorial >So zeigen Sie Bilder in HTML an
So zeigen Sie Bilder in HTML an
- 青灯夜游Original
- 2021-10-11 15:52:1732620Durchsuche
So zeigen Sie Bilder in HTML an: 1. Verwenden Sie das img-Tag mit der Syntax „
“ 2. Fügen Sie „background-image:url (Bilddateiadresse);“ hinzu. zum angegebenen Element.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zeigen Sie Bilder in HTML an
Methode 1: Verwenden Sie das img-Tag, um ein Bild einzufügen
In HTML können Sie das img-Element verwenden, um ein Bild in eine Webseite einzubetten.
Bitte beachten Sie, dass das -Tag technisch gesehen kein Bild in die Webseite einfügt, sondern das Bild von der Webseite verlinkt. Das
-Tag erstellt einen Platzhalter für das referenzierte Bild.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="img/1.jpg" style="max-width:90%" / alt="So zeigen Sie Bilder in HTML an" > </body> </html>
Methode 2: Verwenden Sie das CSS-Hintergrundbild-Attribut
Fügen Sie einfach den Stil „background-image:url(image file address);“ zum angegebenen Element hinzu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 500px;
height: 300px;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-size: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in HTML an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!