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

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

<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 */
}

Answer 3

解决方案：仅为其设置透明边框和背景。

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>

透明图像按钮

3 个答案: