Html 如何制作向上/向下投票按钮？

这只是为了造型，我正试图以与SO和Reddit相同的方式进行向上/向下投票，从我所看到的情况来看，他们使用箭头图像作为背景，然后定位，但我是CSS新手，我需要有人来指导我。提前感谢。

您可以使用两个简单的图像来完成此操作。。。如果你没有MSPaint，在一些图像编辑器（如Photoshop）中设计两幅图像

CSS代码是

#voting{
   width:30px;
   height:40px;
}
.upvote{
   width:30px;
   height: 20px;
   cursor: pointer;
}
.downvote{
   width:30px;
   height: 20px;
   background: url('downvote.jpg') 0 0 no-repeat;
   cursor: pointer;
}

HTML代码：

<div id="voting">
    <div class="upvote"></div>
    <div class="downvote"></div>
</div>

---

您可以在背景中添加不同的图片，按钮的每个状态对应一张图片。然而，有一种更干净、更简单、更现代的方法来实现这个结果：精灵

精灵是作为较大图像的一部分保存的图像。使用精灵的最大优点之一是减少了所有图像到服务器的往返，只需要一次精灵请求。显示图片的元素以图像为背景。背景相对于元素移动，因此元素仅显示图像的一部分。例如，将相框移动到海报上方（或在本例中：将海报移动到相框下方）

此时，他们生成一个包含按钮所有状态的图像。它们为按钮的元素（在本例中为

span

）提供固定的宽度和高度，并使用CSS为其添加背景。然后在click事件上使用javascript切换一个类的状态（开或关）。现在，在CSS中唯一需要做的事情就是使用CSS类更改背景的位置：

for（document.querySelectorAll（'.vote'）的常量btn）{
btn.addEventListener（'click'，事件=>{
event.currentTarget.classList.toggle（'on'）；
});
}

。投票{
显示：内联块；
溢出：隐藏；
宽度：40px；
高度：25px；
光标：指针；
背景：url（'http://i.stack.imgur.com/iqN2k.png');
背景位置：0-25px；
} 
.投票{
背景位置：02px；
}

---

点击投票（使用精灵）：

+1这种技术被称为CSS精灵，它提供了比另一种更好的性能，即每个按钮状态都有一个单独的图像。您可能希望将所有四个状态添加到一个图像中，然后按照Jan指定的方式更改背景。是的，但是对于这个应用程序来说，这是非常基本的。如果你想为网络开发，你应该学习基础知识。@Jan正是我想要的！您将如何合并否决票选项？第二个精灵？@DavidWeisser您可以在同一个图像中为下一票按钮添加两个精灵，并使用相同的技术定位背景，使其在这两种状态之间切换。或者，您可以使用内联svg来实现相同的效果，我更新了答案以包含该技术（因此在此期间已更新以使用该技术）