如何使 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>

（另见this Fiddle）

---

选项 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>

（另见this Fiddle）

---

选项 3：

您可以直接将点击处理程序附加到您的图像：

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

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

（另见this Fiddle）

---

选项 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">

（另见this Fiddle）

---

选项 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>

（另见this Fiddle）

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
}

希望这会有所帮助:)