<按钮>背景图片

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;
}

现场测试案例.

Answer 2

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

CSS选择器button #rock说"给我一个元素rock 在<button>元素内的元素",如下所示:

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

但你想要的是一个带有 id 的<button>元素.而选择器就是(注意按钮和#rock之间缺少的空间).rockbutton#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>