background image

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说“在rock元素中给我一个id为<button>的元素”，如下所示：

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

但你想要的是一个<button>元素与id rock。而选择器将是button#rock（注意按钮和#rock之间缺少的空格）。

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

Answer 2

由于某些奇怪的原因，按钮的宽度和高度已被重置。您还需要在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 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

用#rock替换按钮#rock

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

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

Answer 5

尝试将CS​​S更改为此

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

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

Answer 6

在＃rock之前删除“按钮”：

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

在Google Chrome中为我工作。

Answer 7

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

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

Answer 8

试试这种方式

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