如何让png图像作为按钮？

Question

我第一次使用Dreamweaver进行编码。我是HTML的中间人。

我一直在尝试将png文件用作按钮。我找到了一些消息来说明......

<button src=Home_button> </button>    

...会起作用，但我已经尝试过，但无济于事，它不起作用。有什么建议？

注意：

我也使用CSS来构建这个 Very 基本网站。

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

有许多方法可以创建看起来像图像并且表现得像按钮的东西。

以下是代码示例，演示了值得考虑的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> - 代码：

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>标签的背景图片或代表按钮的其他标签。

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> - 代码的背景图片，<div> - 代码或其他不代表按钮的代码：

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 3

你可以<a href="#"><img src="#" alt="" /></a>来实现你想要的目标。

Answer 4

您可以在img代码中添加button代码。

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

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
}

希望这会有所帮助：）