Question

我有一个按钮，我想设置一个图像而不是简单的文字，所以我决定这样做：

<ul class="signs">
    <li><button onclick="fadeOut('box1');"><img src="img/minus.png" alt="minus"/></button></li>
</ul>

但是图像周围会出现一个小方框，所以它并不是那么好。知道怎么做吗？

Answer 1

这有什么问题？

<ul class="signs">
    <li><img src="img/minus.png" alt="minus" onclick="fadeOut('box1');"/></li>
</ul>

Answer 2

另一种解决方案（使用background-image）

＆＃13;

button {
    background: red url('img/minus.png') no-repeat;
    width: 100px;
    height: 30px;
    border: 0;
}

li {
  list-style: none;
}

＆＃13;

<ul class="signs">
    <li><button onclick="fadeOut('box1');"></button></li>
</ul>

＆＃13;

Answer 3

删除按钮的默认样式。来自here的图片

*{
  margin:0;
  padding:0;
}
button{
  border:none;
  background: transparent;
}

<ul class="signs">

  <li><button onclick="fadeOut('box1');"><img src="http://placehold.it/100x70/ff66cc/ffffff&text=icon1"  alt="minus"/></button></li>
</ul>

如何在HTML和＆amp ;;中将图像设置为按钮CSS？

3 个答案: