Question

我有以下代码：

＆＃13;

#a img {
  display: inline-block;
  width: 14em;
  margin-top: 20px;
  float: left;
}

#a {
  display: inline-block;
  width: 14em;
  margin-left: 3%;
  margin-top: 20px;
  float: left;
}

＆＃13;

<button id='a' name='a' value='x'><img src='../../files/images/someimage.png'  alt='text'></button>

＆＃13;

这会将我的图像显示在灰色框内，如按钮。有没有办法让它周围的灰盒子？因为我只想显示与按钮功能相同的图像

欢迎任何帮助

Answer 1

类似这样的内容，您只需删除button

的默认属性即可

#a{
  background:none;
  border:0;
  outline:0;
}

<button id='a' name='a' value='x'><img src='../../files/images/someimage.png' alt='text'></button>

Answer 2

<button id='a' name='a' value='x'><img src='submit.gif'  alt='text'></button>
  <style>
  button{
    background:transparent;
    border:none
  }
  <style>

您可以为按钮指定透明背景。如果需要，可以使用input type =“image”。

Answer 3

button {
  background: url("http://placehold.it/200x50");
  background-size: cover;
  width: 200px;
  height: 50px;
  cursor: pointer;
}

button:hover {
border: thin solid red;
}

<button></button>

Answer 4

你可以通过border:none来做。只需将其添加到您的CSS

#a { display:inline-block; width:14em; margin-left:3%;  margin-top:20px; float:left; border: none; outline: 0; background: none }
#a:focus, #a:hover { border: none; outline: 0; background: none }

如何设置显示为图像的按钮的样式

4 个答案: