在 HTML 中的按鈕中嵌入影象
本文將討論在 HTML 中的 <button> 元素中嵌入影象的幾種方法。表示在 HTML 按鈕內修復或設定圖片。
使用 <button> 標籤內的 <img> 標籤在 HTML 按鈕中嵌入影象
這個 <img> 標籤用於在 HTML 頁面上嵌入影象。影象並沒有直接放入網頁中；影象通過給定的路徑連結到網頁。此標籤為特定影象生成一個空間。該標籤有兩個必需的屬性，即 src 和 alt。我們可以使用 HTML 中的 <button> 標籤建立一個可點選的 HTML 按鈕。將 <img> 標籤放置在 <button> 標籤內會建立一個可點選的 HTML 按鈕，其中嵌入了影象。
例如，在 HTML 正文中，開啟 <button> 標記。將 type 指定為 button。然後，開啟 <img> 標籤並在 src 屬性中指定影象 URL。接下來，將 height 和 width 分別設定為 80 和 100。最後，在以下幾行中關閉所有先前開啟的標籤。
在下面的示例中，我們建立了一個 <button> 元素並在其中插入了一個影象以嵌入按鈕內。我們使用 URL 縮短器將影象的短 URL 放在 src 標籤中。因此，可以在 HTML 中建立帶有影象的按鈕。
示例程式碼：
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
使用 <input type="image"> 標籤在 HTML 按鈕中嵌入影象
<input> 標籤指定了一個輸入欄位，我們可以在其中輸入我們的資料。HTML 中允許使用多種輸入型別和控制元件元件。其中一些是 <input type="button">、<input type="color">、<input type="email">、<input type="text">。我們可以將 type 屬性設定為 image 並設定 src 以在輸入型別中嵌入影象。它將起到按鈕的作用。
例如，在 HTML 正文中，開啟 <input> 標記並將 type 指定為 image。然後，在 src 屬性中輸入影象 URL。接下來，編寫 style 屬性並將 border 設定為 double。此外，將高度和寬度新增為 80 和 170。然後，關閉輸入標籤和所有之前開啟的標籤。
下面的示例說明了在 HTML 頁面上嵌入影象的方法。<type="image"> 標籤指定我們在工作中插入或使用影象。我們使用內聯 CSS 來設定影象的邊框、高度和寬度。我們這樣做是為了使影象看起來更像一個按鈕。值 double 指定在影象按鈕外使用雙邊框。高度和寬度幫助影象進入一個確定的大小。如果我們不指定影象的高度和寬度，載入影象時頁面可能會閃爍。通過這種方式，我們可以在 HTML 按鈕中嵌入影象。
示例程式碼：
<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