如何将图像用作按钮？答案

【问题标题】：How to use a image as a button?如何将图像用作按钮？
【发布时间】：2016-10-18 00:58:15
【问题描述】：

如您所见，这是图片后面的一个按钮。我想删除那个按钮。并将图像用作按钮

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <button class="buttonup" id="plus" style="vertical-align:middle"><span><img src="http://i.imgur.com/jWPUjR9.png"> </span> </button> <span id="count">0</span>
  <button class="buttondw" id="minus" style="vertical-align:middle"><span><img src="http://i.imgur.com/Vu6tuf9.png"> </span> </button>
</center>

【问题讨论】：

您可以使用“background-image(url:yourimage.jpg)”制作一个 div。然后让那个 div 响应点击事件
Zapp，对不起，我不知道怎么做，你能告诉我吗？
Embed image in a <button> element的可能重复

标签： html css button

【解决方案1】：

使用输入类型="图片"

如果您不想提交页面或其所在的表单，则需要在 click 事件上设置 preventDefault()

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
</center>

【讨论】：

【解决方案2】：

修改一些css

.buttonup {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    cursor: pointer;
    padding: 0;
    width: 45px;
}


.buttondw {
   background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    cursor: pointer;
    padding: 0;
    width: 45px;
}

https://fiddle.jshell.net/g6Lhurae/25/

【讨论】：

【解决方案3】：

试试这个：

.buttonup {
  padding: 0px;
  text-align: center;
  width: 50px;
  cursor: pointer;
  margin-right: 10px;
  border:none;
  background:none;
}


.buttondw {
  width: 50px;
   text-align: center;
  cursor: pointer;
  margin-left: 5px;
  border:none;
  background:none;
}

【讨论】：

【解决方案4】：

实际上你很接近，只需在你的类上添加背景：无和边框：无：

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
  background:none;
  border:none;
}

【讨论】：

【解决方案5】：

tip：不要在你的html中使用center标签；它已被弃用，在 html5 中不受支持。（我知道这不是问题，但觉得应该指出）。

所以我给你的 css/html 如下（计数 css 取自 mplungians 帖子）

var counter = 0, // Try change this what ever you want
  votePlus = counter + 1,
  voteMinus = counter - 1;

function checkIfUserVoted() {
  return localStorage.getItem("voted");
}
if (!localStorage.getItem("voted")) {
  localStorage.setItem("voted", counter);
  $("#count").text(counter);
}
$(".buttonup").click(function() {
  var vote = checkIfUserVoted() != votePlus ? votePlus : counter;
  localStorage.setItem("voted", vote);
  $(this).next().text(vote);
});
$(".buttondw").on('click', function () {
  var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter;
  localStorage.setItem("voted", vote);
  $(this).prev().text(vote);
});

#buttons{margin-left: 35%; margin-right:35%;}
.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}
.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}


.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}








#count {
 display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
      
</div>

【讨论】：