透明图像按钮

Question

我制作了一个按钮，它打开后有点像下拉页面。我还制作了一个按钮来收回页面并将图像放入其中，但我想让按钮不显示，只显示图像。有人可以帮忙吗？

HTML：

<button onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

Answer 1

解决办法如下：

.transparent_button {
    	background-color: transparent;
        border: 0px;
    }

  <button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

但是对于编写更好的解决方案，您可以试试这个（这不会无用地强制 CSS）：

<img onclick="close1()"src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30">

Answer 2

解决办法：只为它设置透明边框和背景。

button {
  background: transparent;
  border: none;
}

<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>

Answer 3

如果您不需要按钮，而只是要单击的图像，则可以不使用按钮并使用以下代码：

<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />

也许，如果你想要一个边框，你可以把它装箱并设置样式：

HTML：

<div class="imageBox">
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
</div>

CSS：

.imageBox{
    border:1px solid #c1c1c1;
    /* Other additional styles */
}