CSS 背景大小不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21388712/
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
Background-size doesn't work
提问by drake035
Here's my CSS:
这是我的 CSS：
.banner-text-BG {
background: #00A7E1 url(images/sale_tag.png) left center no-repeat !important;
background-size: 20px 20px;
height: auto;
padding: 15px;
position: static;
width: auto;
-webkit-border-radius: 70px 10px 10px 70px;
-moz-border-radius: 70px 10px 10px 70px;
border-radius: 70px 10px 10px 70px;
padding-left: 70px;
}
Contrary to all the other styles, the "background-size: 20px;" has no effect on my page, is not visible in Firebug, and as a sidenote is not highlighted as a valid CSS instruction in Notepad++. Same with "background-size: 20px;" or "background-size: 20px auto;"
与所有其他样式相反，“background-size: 20px;” 对我的页面没有影响，在 Firebug 中不可见，并且作为旁注在 Notepad++ 中没有突出显示为有效的 CSS 指令。与“背景尺寸：20px;”相同 或“背景尺寸：20px 自动；”
Am I missing something? Why does it not work?
我错过了什么吗？为什么它不起作用？
回答by j08691
As the background-size docsstate:
正如背景大小文档所述：
If the value of this property is not set in a background shorthand property that is applied to the element after the background-size CSS property, the value of this property is then reset to its initial value by the shorthand property.
如果此属性的值未在应用到 background-size CSS 属性之后的元素的背景速记属性中设置，则此属性的值将通过速记属性重置为其初始值。
In other words, if you're using the shorthand property but don't include the background-size rule as a part of it, the separate background-size is essentially reset and ignored.
换句话说，如果您使用速记属性但不包含背景大小规则作为其一部分，则单独的背景大小基本上会被重置并被忽略。
So to get around that you just need to roll it into the background shorthand you're already using by adding a slash after the background-position and including your size:
因此，要解决这个问题，您只需将它滚动到您已经使用的背景速记中，方法是在背景位置后添加一个斜杠并包括您的尺寸：
background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;
回答by Marcatectura
Your use of !importantin the background shorthand is preventing the background-sizeproperty from applying, at least in Chrome.
您!important在后台使用速记会阻止应用该background-size属性，至少在 Chrome 中是这样。
Removing the !importantallows the background-sizing to take effect. See the jsfiddle: http://jsfiddle.net/QVXsj/9/
删除!important允许背景调整生效。见jsfiddle：http: //jsfiddle.net/QVXsj/9/
回答by Matoeil
"!important" should be avoided.
“！重要”应该避免。
I would split all background attributes as such:
我会这样拆分所有背景属性：
.banner-text-BG {
background-image: url(images/sale_tag.png)
background-position: left center;
background-color: #00A7E1;
background-repeat: no-repeat;
background-size: 20px 20px;
}
