Question

我为<button>设置背景图片时遇到了一些问题。

这是我在网站上的html：

 <button id="rock" onClick="choose(1)">Rock</button>

这是CSS：

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

我不知道为什么按钮的背景仍然是白色。

Answer 1

由于某些奇怪的原因，按钮的宽度和高度已被重置。您还需要在ID选择器中指定它们：

#rock {
    width: 150px;
    height: 150px;
    background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
    background-repeat: no-repeat;
}

Live test case

Answer 2

令人惊讶的是，没有答案在这里解决或提到实际问题。

CSS选择器button #rock说“给我一个标识rock a <button>元素”的元素，如下所示：

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

但您想要的是<button>元素，标识为rock。并且选择器为button#rock（注意按钮和 #rock 之间缺少空格）。

正如@Greg已经提到的那样：#rock已经具体到足以定位按钮，可以单独使用。

Answer 3

您需要在按钮

中调用CLASS

<button class="tim" id="rock" onClick="choose(1)">Rock</button>



<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>

Answer 4

尝试将CSS更改为此

button #rock {
    background: url('img/rock.png') no-repeat;
}

...只要图像在那个地方

Answer 5

替换按钮#rock 同 #rock

无需额外的选择范围。您正在使用尽可能具体的ID。

JsBin示例：http://jsbin.com/idobar/1/edit

Answer 6

在＃rock：

之前删除“按钮”

button #rock {
    background: url(img/rock.png) no-repeat;
}

在谷歌浏览器中为我工作。

Answer 7

要摆脱白色，您必须将背景颜色设置为透明：

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}

Answer 8

你绝对需要一个按钮标签元素吗？因为您可以改用 input type="button" 元素。

然后只需链接此 CSS：

  input[type="button"]{
  width:150px;
  height:150px;
  /*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150px 150px;
}

<input type="button"/>

Answer 9

试试这种方式

<button> 
    <img height="100%" src="images/s.png"/>
</button>

<按钮>背景图片</button>

9 个答案: