Html <按钮> 背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15461317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<button> background image
提问by Kyrbi
I have got a little problem with setting a background image for <button>.
我在设置背景图像时遇到了一个小问题<button>。
Here is the html I have got on site:
这是我在网站上获得的html：
<button id="rock" onClick="choose(1)">Rock</button>
And here is the CSS:
这是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.
我不知道为什么按钮的背景仍然是白色的。
采纳答案by maryisdead
Astonishing that no answer addresses or mentions the actual problem here.
令人惊讶的是，没有答案解决或提到这里的实际问题。
The CSS selector button #rocksays "give me an element with the id rockinsidea <button>element", like this:
该CSS选择器button #rock说：“给我一个元素与IDrock里面一个<button>元素”，就像这样：
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button>element withthe id rock. And the selector for that would be button#rock(note the missing space between buttonand #rock).
但是你想要的是一个带有id的<button>元素。选择器将是（注意button和#rock之间缺少的空间）。rockbutton#rock
And as @Greg already mentioned: #rockis already specific enough to target the button and could be used on its own.
正如@Greg 已经提到的：#rock已经足够具体到可以定位按钮并且可以单独使用。
回答by Shadow Wizard is Ear For You
For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:
出于某种奇怪的原因，按钮的宽度和高度已被重置。您还需要在 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;
}
回答by Tom
You need to call CLASS in button
您需要在按钮中调用 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>
回答by Greg
Replace button #rock With #rock
用 #rock 替换按钮 #rock
No need for additional selector scope. You're using an id which is as specific as you can be.
不需要额外的选择器范围。您正在使用一个尽可能具体的 id。
JsBin example: http://jsbin.com/idobar/1/edit
JsBin 示例：http://jsbin.com/idobar/1/edit
回答by ?smet Alkan
Delete "button" before # rock:
删除 #rock 之前的“按钮”：
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.
在 Google Chrome 中为我工作。
回答by Adam Brown
Try changing your CSS to this
尝试将您的 CSS 更改为此
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place
...前提是图像在那个地方
回答by tourdefran
To get rid of the white color you have to set the background-color to transparent:
要摆脱白色，您必须将背景颜色设置为透明：
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
回答by Areej Qasrawi
try this way
试试这个方法
<button>
<img height="100%" src="images/s.png"/>
</button>
