html - <按钮> 背景图片

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

令人惊讶的是，没有答案解决或提及此处的实际问题。

CSS 选择器 button #rock说“给我一个 ID 为 rock 的元素 inside a <button> 元素”，像这样:

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

但你想要的是 <button>元素与 ID rock .而选择器将是 button#rock (注意 button 和 #rock 之间缺少空格)。

正如@Greg 已经提到的:#rock已经足够具体到可以定位按钮并且可以单独使用。