28

我在设置背景图像时遇到了一点问题<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;
}

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

4

9 回答 9

25

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

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

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

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

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

于 2014-06-19T12:45:13.483 回答
24

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

现场测试用例。

于 2013-03-17T13:40:53.540 回答
4

您需要在按钮中调用 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>
于 2013-03-17T13:52:26.933 回答
2

用#rock替换按钮#rock

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

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

于 2013-03-17T13:42:19.777 回答
0

尝试将您的 CSS 更改为此

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

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

于 2013-03-17T13:37:28.497 回答
0

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

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

在 Google Chrome 中为我工作。

于 2013-03-17T13:42:10.927 回答
0

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

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}
于 2017-05-23T17:50:50.003 回答
0

你绝对需要一个按钮标签元素吗？因为您可以改用 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;
}
<input type="button"/>

于 2021-01-31T16:51:55.617 回答
-1

试试这个方法

<button> 
    <img height="100%" src="images/s.png"/>
</button>
于 2016-11-24T08:50:33.337 回答