<按钮> 背景图片答案

【问题标题】：<button> background image<按钮> 背景图片
【发布时间】：2013-03-05 20:58:45
【问题描述】：

我在为<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;
}

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

【问题讨论】：

标签： html css image

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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.

【讨论】：

【解决方案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>

【讨论】：

给id和button比较复杂，class也可以用于其他button
两者都可以，但 id 通常用于其中一种元素，因为它们的规则很难被超越。 css-tricks.com/specifics-on-css-specificity

【解决方案4】：

替换按钮#摇滚和 #摇滚

不需要额外的选择器范围。您正在使用尽可能具体的 id。

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

【讨论】：

【解决方案5】：

删除#rock之前的“按钮”：

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

在 Google Chrome 中为我工作。

【讨论】：

【解决方案6】：

试着把你的 CSS 改成这个

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

...前提是图片在那个地方

【讨论】：

我编辑了您的答案以更正选择器。按钮与其 ID 之间不应有空格。
你根本不需要按钮部分。这只是一个性能障碍。

【解决方案7】：

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

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

【讨论】：

【解决方案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;
}

&lt;input type="button"/&gt;

【讨论】：

【解决方案9】：

试试这个方法

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

【讨论】：