< button>背景图 [英] <button> background image

问题描述

我有一个问题，为< button> 设置背景图片。

我已经在网站上的html：

 < button id =rockonClick =choose（1）&摇滚< / button> 
  

这里是CSS：

 按钮{
 font-size：18px; 
 border：2px solid＃AD235E; 
 border-radius：100px; 
 width：150px; 
 height：150px; 
} 
 
按钮#rock {
 background：url（img / rock.png）no-repeat; 
} 
  

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

解决方案

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

CSS选择器按钮#rock 说：给我一个元素 rock 里面 < button> 元素，如下所示：

 < button> 
< span id =rock>此元素将受到影响。< / span> 
< / button> 
  

但你想要的是< button> 元素与标识 rock 。而选择器将是 button＃rock （注意按钮 / p>

由于@Greg已经提到： #rock 已经足够专门定位按钮，

I have got a little problem with setting a background image for <button>.

Here is the html I have got on site:

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

And here is the 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;
}

I don't know why the button's background is still white.

解决方案

Astonishing that no answer addresses or mentions the actual problem here.

The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:

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

But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).

And as @Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.

这篇关于< button>背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！