Bild in eine Schaltfläche in HTML einbetten
-
Verwenden Sie das
<img>-Tag innerhalb des<button>-Tags, um das Bild in den HTML-Button einzubetten -
Verwenden Sie das Tag
<input type="image">, um ein Bild in die HTML-Schaltfläche einzubetten
In diesem Artikel werden verschiedene Methoden zum Einbetten eines Bildes in ein <button>-Element in HTML beschrieben. Es bedeutet, ein Bild innerhalb der HTML-Schaltfläche zu reparieren oder einzustellen.
Verwenden Sie das <img>-Tag innerhalb des <button>-Tags, um das Bild in den HTML-Button einzubetten
Dieses <img>-Tag wird verwendet, um ein Bild in eine HTML-Seite einzubetten. Die Bilder werden nicht buchstäblich in die Webseite eingefügt; Bilder sind über vorgegebene Pfade mit den Webseiten verbunden. Dieses Tag erzeugt ein Leerzeichen für das jeweilige Bild. Das Tag hat zwei erforderliche Attribute, nämlich src und alt. Wir können mit dem Tag <button> in HTML einen anklickbaren HTML-Button erstellen. Das Platzieren des <img>-Tags innerhalb des <button>-Tags erzeugt einen anklickbaren HTML-Button mit einem darin eingebetteten Bild.
Öffnen Sie beispielsweise im HTML-Body das Tag <button>. Geben Sie type als button an. Öffnen Sie dann das Tag <img> und geben Sie die Bild-URL im Attribut src an. Als nächstes stellen Sie height und width auf 80 bzw. 100. Schließen Sie abschließend alle zuvor geöffneten Tags in den folgenden Zeilen.
Im folgenden Beispiel haben wir ein <button>-Element erstellt und ein Bild darin eingefügt, das in den Button eingebettet werden soll. Wir haben einen URL-Shortener verwendet, um die Kurz-URL des Bildes im src-Tag zu platzieren. So kann in HTML ein Button mit einem Bild erstellt werden.
Beispielcode:
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
Verwenden Sie das Tag <input type="image">, um ein Bild in die HTML-Schaltfläche einzubetten
Das Tag <input> spezifiziert ein Eingabefeld, in das wir unsere Daten eingeben können. In HTML sind viele Eingabetypen und Steuerelement-Widgets zulässig. Einige davon sind <input type="button">, <input type="color">, <input type="email">, <input type="text">. Wir können das Attribut type auf image setzen und src setzen, um ein Bild in den Eingabetyp einzubetten. Es wird als Taste fungieren.
Öffnen Sie beispielsweise im HTML-Body das Tag <input> und geben Sie type als image an. Geben Sie dann die Bild-URL in das Attribut src ein. Schreiben Sie als nächstes das Attribut style und setzen Sie den border auf double. Fügen Sie auch die height und width als 80 und 170 hinzu. Schließen Sie dann das Input-Tag und alle zuvor geöffneten Tags.
Das folgende Beispiel veranschaulicht eine Methode zum Einbetten eines Bilds in eine HTML-Seite. Das Tag <type="image"> gibt an, dass wir ein Bild in unsere Arbeit einfügen oder verwenden. Wir haben das Inline-CSS verwendet, um border, height und width des Bildes einzustellen. Wir haben dies getan, damit das Bild eher wie eine Schaltfläche aussieht. Der Wert double gibt an, dass ausserhalb der Bildschaltfläche ein doppelter Rahmen verwendet wird. Höhe und Breite verhelfen dem Bild zu einer bestimmten Größe. Wenn wir die Höhe und Breite eines Bildes nicht angeben, kann die Seite beim Laden des Bildes flackern. Auf diese Weise können wir ein Bild in einen HTML-Button einbetten.
Beispielcode:
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn