如何使png图像充当按钮? [英] How can I make png image act as a button?

问题描述

我是第一次使用Dreamweaver进行编码.我在HTML中处于中等水平.

I am using Dreamweaver for the first time to code. I am intermediate in HTML.

我一直在尝试使用png文件作为按钮.我发现一些消息来源表明...

I've been trying to use a png file as a button. I've found some sources stating that a ...

<button src=Home_button> </button>    

...可以工作，但是我已经尝试过了，但无济于事，它不起作用.有什么建议吗?

... will work, but I have tried it, and to no avail, it does not work. Any suggestions?

我也在使用CSS来构建这个非常基本网站.

I am also using a CSS to build this Very basic website.

推荐答案

只需在按钮上添加background-image.

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

然后添加:

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

当然，您可能需要为其添加其他样式，例如宽度和其他背景属性，以使其恰到好处.但这是将背景图像添加到按钮的方式.

You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.

这也是一个正在运行的演示:

Here's a working demo as well:

#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>

这篇关于如何使png图像充当按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！