添加图片到按钮

Question

我想给按钮.img-btn-next和img-btn-prev添加一个.png图片.这是一个图片库，我想把按钮换成下一个图标。我是一个初学者，我想这不是那么困难的.提前感谢您的帮助。

---

    display: block;
    padding: 0.5vw 0.5vw;
    position: fixed;
    background-color: black;
    color: white;
    top: 50vh;
    z-index: 150;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    cursor: pointer; 

}

.img-btn-next:hover{
    opacity: 0.8;
}

.img-btn-prev {
    display: block;
    padding: 0.5vw 0.5vw;
    background-color: black;
    position: fixed;
    top: 50vh;
    z-index: 150;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
}

.img-btn-prev:hover{
    opacity: 0.8;
-----------------------------------------------------------------------

let newNextBtn = document.createElement("a");
                let btnNextText = document.createTextNode("next");
                newNextBtn.appendChild(btnNextText);
                container.appendChild(newNextBtn);
                newNextBtn.setAttribute("class", "img-btn-next");
                newNextBtn.setAttribute("onclick", "changeImg(1)");
                newNextBtn.style.cssText = "right:" + calcImgtoEdge + "px;";



                //last Button
                let newPrevBtn = document.createElement("a");
                let btnPrevText = document.createTextNode("last");
                newPrevBtn.appendChild(btnPrevText);
                container.appendChild(newPrevBtn);
                newPrevBtn.setAttribute("class", "img-btn-prev");
                newPrevBtn.setAttribute("onclick", "changeImg(0)");
                newPrevBtn.style.cssText = "left:" + calcImgtoEdge + "px;";

}

Answer 1

你可以简单地添加一个 <img> 标签内 <a> 或 <button> 元素，我认为这是更简单的选择，以便正确地设置它的样式，并与其他元素（如文本标签）混合。

.img-btn {
  position: fixed;
  display: block;
  top: 50vh;
  transform: translate(0, -50%);
  text-transform: uppercase;
  font-family: monospace;
  cursor: pointer; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  width: 128px;
  height: 128px;
  box-shadow: 0 0 64px rgba(0, 0, 0, .125);
}

.img-btn:hover {
  opacity: 0.5;
}

.img-btn-next {
  left: 16px;
}

.img-btn-prev {
  right: 16px;
}

.img-btn-img {
  width: 64px;
  margin: 0 0 8px;
}

<a class="img-btn img-btn-prev">
  <img class="img-btn-img" src="https://i.stack.imgur.com/9fbz7.png" />
  <span class="img-btn-text">Prev</span>
</a>

<a class="img-btn img-btn-next">
  <img class="img-btn-img" src="https://i.stack.imgur.com/WBFLy.png" />
  <span class="img-btn-text">Next</span>
</a>

或者，你也可以把它添加为CSS背景。

.img-btn {
  position: fixed;
  display: block;
  top: 50vh;
  transform: translate(0, -50%);
  text-transform: uppercase;
  font-family: monospace;
  cursor: pointer; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  width: 128px;
  height: 128px;
  box-shadow: 0 0 64px rgba(0, 0, 0, .125);
  background-size: 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.img-btn:hover {
  opacity: 0.5;
}

.img-btn-prev {
  left: 16px;
  background-image: url("https://i.stack.imgur.com/WBFLy.png");
}

.img-btn-next {
  right: 16px;
  background-image: url("https://i.stack.imgur.com/9fbz7.png");
}

.img-btn-img {
  width: 64px;
  margin: 0 0 8px;
}

<a class="img-btn img-btn-prev"></a>
<a class="img-btn img-btn-next"></a>