在 HTML 中的按鈕中嵌入影象

Sushant Poudel 2023年2月19日 2021年10月2日
  1. 使用 <button> 標籤內的 <img> 標籤在 HTML 按鈕中嵌入影象
  2. 使用 <input type="image"> 標籤在 HTML 按鈕中嵌入影象
在 HTML 中的按鈕中嵌入影象

本文將討論在 HTML 中的 <button> 元素中嵌入影象的幾種方法。表示在 HTML 按鈕內修復或設定圖片。

使用 <button> 標籤內的 <img> 標籤在 HTML 按鈕中嵌入影象

這個 <img> 標籤用於在 HTML 頁面上嵌入影象。影象並沒有直接放入網頁中;影象通過給定的路徑連結到網頁。此標籤為特定影象生成一個空間。該標籤有兩個必需的屬性,即 srcalt。我們可以使用 HTML 中的 <button> 標籤建立一個可點選的 HTML 按鈕。將 <img> 標籤放置在 <button> 標籤內會建立一個可點選的 HTML 按鈕,其中嵌入了影象。

例如,在 HTML 正文中,開啟 <button> 標記。將 type 指定為 button。然後,開啟 <img> 標籤並在 src 屬性中指定影象 URL。接下來,將 heightwidth 分別設定為 80100。最後,在以下幾行中關閉所有先前開啟的標籤。

在下面的示例中,我們建立了一個 <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。此外,將高度寬度新增為 80170。然後,關閉輸入標籤和所有之前開啟的標籤。

下面的示例說明了在 HTML 頁面上嵌入影象的方法。<type="image"> 標籤指定我們在工作中插入或使用影象。我們使用內聯 CSS 來設定影象的邊框高度寬度。我們這樣做是為了使影象看起來更像一個按鈕。值 double 指定在影象按鈕外使用雙邊框。高度和寬度幫助影象進入一個確定的大小。如果我們不指定影象的高度和寬度,載入影象時頁面可能會閃爍。通過這種方式,我們可以在 HTML 按鈕中嵌入影象。

示例程式碼:

<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/> 
Sushant Poudel avatar Sushant Poudel avatar

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

相關文章 - HTML Button