将图像添加到按钮

Posted 2023-03-06

【中文标题】将图像添加到按钮

【英文标题】：Add image to Button

【发布时间】：2020-08-24 19:40:50

【问题描述】：

我想将 .png 图像添加到按钮 .img-btn-next 和 img-btn-prev。 这是一个图片库，我想用下一个图标替换按钮。 我是初学者，我想这并不难。 提前感谢您的帮助。

---

    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;";

【参考方案1】：

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

.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>