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>

将图像添加到按钮

1 个答案: