如何在 html 中使 png 文件成為按鈕

Question

我不是專業的程序員，但我試圖將 PNG 文件轉換為 html 中的按鈕，但我無法讓按鈕以一種看起來不錯的方式與 png 齊平。 到目前為止，我已經用谷歌搜索了許多解決方案，但要么我不了解實施修復，要么我的問題不是我認為的那樣。

 <a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html"> <button type="submit" style="height:80px; width:360px "><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center" alt="Submit"> </button> </a>

這是當前代碼產生的。

Answer 1

您可以將以下 CSS 添加到代碼中：

button {
  padding: 0;
}
img {
  width: 100%;
  height: 100%
}

這適合按鈕內的 png 並刪除按鈕填充（按鈕具有填充，除非您將其刪除）。 您也可以將其添加到您的內聯 html：

<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
  <button type="submit" style="height:80px; width:360px; padding: 0"><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center; width: 100%; height: 100%" 
    alt="Submit">
  </button>
</a>

旁注..您不應該將按鈕包裝在標簽中。 這對 seo、可訪問性和許多其他事情都是不利的。只需將您的圖像包裝在一個標簽中並相應地進行樣式設置，就可以滿足您的要求，同時保持合規性。 除非您嘗試提交某種形式的表單，否則不需要按鈕 - 即使在這種情況下，也不要將按鈕包裝在 a 標簽中

Answer 2

在您的按鈕上使用 class 並使用背景從樣式表中對其進行樣式設置。

<input type="button" class="button" ...>

然后在你的樣式表中

.button
{
    background: url(path/to/img.png) no-repeat ...;
    cursor: pointer;
    ....
}

將標記與 styles 分開總是一個好主意。 我還建議無論按鈕實際做什么（除非它只是指向其他內容的鏈接），請為此使用 javascript。