如何使 png 圖像充當按鈕？

Question

我第一次使用 Dreamweaver 進行編碼。 我是 HTML 中級。

我一直在嘗試使用 png 文件作為按鈕。 我發現一些消息來源說...

<button src=Home_button> </button>    

...會起作用，但我已經嘗試過了，但無濟於事，它不起作用。 有什么建議？

---

筆記：

我還使用 CSS 來構建這個非常基本的網站。

Answer 1

只需將background-image添加到您的按鈕。

<button id="home_button">click me</button>

然后添加：

#home_button {
  background-image: url(...);
}

當然，您可能需要為其添加進一步的樣式，例如寬度和其他背景屬性以使其恰到好處。 但這就是向按鈕添加背景圖像的方式。

這里還有一個工作演示：

 #home_button { width: 150px; height: 150px; background-image: url('http://i.stack.imgur.com/sfed8.png'); background-size: cover; background-color: #eee; }

 <button id="home_button"></button>

Answer 2

您可以在button標簽中添加一個img標簽。

 <button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>

Answer 3

有很多方法可以創建看起來像圖像並且行為像按鈕的東西。

下面是代碼示例，演示了 5 個值得考慮的選項......

---

選項1 ：

您可以將<img>元素放在<button>元素中：

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 button, img { padding: 0; font-size: 0; border: none; }

 <button id="myButton"> <img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt=""> </button>

（另見這個小提琴）

---

選項2：

您可以使用<a> -tag 代替：

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 a { border: none; display: inline-block; font-size: 0; }

 <a id="myButton" href="#"> <img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt=""> </a>

（另見這個小提琴）

---

選項 3：

您可以將點擊處理程序直接附加到您的圖像：

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 <img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">

（另見這個小提琴）

---

選項 4：

您可以將圖像設置為<button> -tag 或其他代表按鈕的標記的背景圖像。

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 input[type=submit] { background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150"); width: 150px; height: 150px; border: none; }

 <input type="submit" id="myButton">

（另見這個小提琴）

---

選項 5：

您可以將圖像設置為<a> -tag、 <div> -tag 或其他不代表按鈕的標簽的背景圖像：

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 div { background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150"); width: 150px; height: 150px; border: none; }

 <div id="myButton"></div>

（另見這個小提琴）

Answer 4

你可以做<a href="#"><img src="#" alt="" /></a>來實現你想要的。

Answer 5

有幾種方法可以將圖像用作按鈕。

    <a href="your_link.html">
      <img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
    </a>
css..
#mypic {
    background: #390239;
    color:#7e4a00;
    border:#7e4a00 2px solid;
    border-color:;
    outline:none;
    padding: 6px;
    border-radius:5px;
    text-align: center;
}

Chris 也有一個很好的答案……這取決於頁面上看起來不錯的內容以及您的編碼知識。

Answer 6

這是你可以做的...

HTML

<button>Click Me</button>

CSS

button {
  display: inline-block;
  height: 50px // height of your button image
  text-indent: -9999px // hide if you have text inside <button>
  width: 100px // width of your button image
}

希望這會有所幫助:)