Html 使用 CSS 向按钮添加背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11404545/
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
Adding background image to button using CSS
提问by JROB
I am trying to add a background image to a button (or link with the same class) which already has a background color.
我正在尝试将背景图像添加到已经具有背景颜色的按钮（或具有相同类的链接）。
Here is the jsfiddle: http://jsfiddle.net/BNvke/
这是 jsfiddle：http: //jsfiddle.net/BNvke/
The button looks great by itself, but I am trying to make it so that if I add a certain class, the padding will be adjusted and a background image will be displayed, however the image does not show. Here is the CSS/HTML:
该按钮本身看起来很棒，但我正在尝试这样做，以便如果我添加某个类，则将调整填充并显示背景图像，但图像不显示。这是 CSS/HTML：
.button {
padding: 10px;
margin-right: 8px;
margin-bottom:10px;
font-family: Arial, Tahoma, Verdana, FreeSans, sans-serif;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
display: inline-block;
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius:4px;
box-shadow:1px 1px 2px 0 #CCCCCC;
-moz-box-shadow: 1px 1px 2px 0 #CCCCCC;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
}
.button_blue {
border: 1px solid #305875;
color: #FBFBFB;
background-color: #3D6E97;
}
.button_blue:hover {
color: #FBFBFB;
opacity:0.9;
filter:alpha(opacity=90);
}
.button_about {
background-image: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
padding-left: 35px;
padding-right: 15px;
}?
-
——
<p><a class="button button_blue">Without Background</a></p>
<p><a class="button button_blue button_about">With Background</a></p>?
How can I get that background image to show?
我怎样才能让背景图片显示出来？
回答by Fabrizio Calderan
see http://jsfiddle.net/BNvke/1/
just change
只是改变
background-image url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
with
和
background: url(http://i47.tinypic.com/2ni0ahd.png) 3px 5px no-repeat;
and move up the last rule so the rule about background-colordefined for .button_bluecan be applied on cascade
并向上移动最后一条规则，以便可以在级联上应用有关background-color定义的规则.button_blue
