使用 css 更改 HTML 按钮标签背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22737579/
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
Changing HTML button tag background color with css?
提问by Meta
I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.
我将 HTML 按钮标签用于我的提交按钮以及指向其他页面和功能的按钮，我希望能够拥有具有不同背景的按钮（一个蓝色、一个灰色、一个红色、一个绿色等）但是似乎无法通过简单地向按钮标签添加一个类来使其工作。
Here is what I have so far HTML
这是我到目前为止的 HTML
<button class="green_btn" type="submit" name="cnp">News Control</button>
CSS
CSS
button {
margin: 0 auto 5px auto;
display: block;
width: 134px;
height: 35px;
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
border: 0 none;
font-weight: bold;
text-align: center;
color: #fff;
cursor: pointer;
}
.grey_btn button {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button {
background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
background: url('../images/red_btn_bg.png') no-repeat left;
}
by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.
默认情况下，我希望按钮以 garkgrey_btn_bg.png 作为背景，但如果我想使用 green_btn_bg.png 作为背景，则将 class="green_btn" 添加到 html 没有任何作用。
Anyone have any ideas?
谁有想法？
采纳答案by Seth
You're targeting your class improperly with .class-name button. That is actually looking for an element with a child button.
您使用.class-name button. 这实际上是在寻找带有子按钮的元素。
Here you go...
干得好...
button.grey_btn {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn {
background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
background: url('../images/red_btn_bg.png') no-repeat left;
}
回答by Utkanos
Your classes are looking for a button insidean element with a colour class. For example:
您的类正在寻找具有颜色类的元素内的按钮。例如：
.red_btn button
...is looking for a button inside a parent element with the class red_btn. It should in fact be:
...正在寻找具有 class 的父元素内的按钮red_btn。其实应该是：
button.red_btn
...though the buttonpart of the selector is probably redundant unless you have other elements of different types with the same class names.
...尽管button选择器的部分可能是多余的，除非您有其他具有相同类名的不同类型元素。
回答by mecampbellsoup
For anyone that ends up here who, like me, wasn't sure how to change a button's background color...
对于最终到这里的任何人，像我一样，不确定如何更改按钮的背景颜色......
Instead of this in your CSS file:
而不是在您的 CSS 文件中：
#footer_join_button {
background-color: $light_green;
}
... or even:
... 甚至：
#footer_join_button {
color: $light_green;
}
... the correct attribute/property to target is simply background:
...要定位的正确属性/属性很简单background：
#footer_join_button {
background: $light_green;
}
Note: I'm using SASSprecompiler, hence the potentially strange-looking $light_greenvariable above.
注意：我使用的是SASS预编译器，因此$light_green上面的变量可能看起来很奇怪。
