在 HTML 中的按鈕中嵌入影象
![在 HTML 中的按鈕中嵌入影象](/img/HTML/feature-image---html-button-with-image.webp)
本文將討論在 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