背景大小不起作用
背景大小不起作用
提问于 2014-01-28 02:29:07
这是我的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;
}与所有其他样式相反，"background-size: 20px;“在我的页面上没有效果，在Firebug中不可见，并且在Notepad++中没有突出显示为有效的CSS指令。同"background-size: 20px;“或"background-size: 20px auto;”
我是不是遗漏了什么？为什么它不起作用？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-28 02:43:03
作为background-size docs状态：
如果此属性的值未在应用于background-size CSS属性之后应用于元素的后台速记属性中设置，则此属性的值将由速记属性重置为其初始值。
换句话说，如果您使用速记属性，但没有将背景大小规则作为其中的一部分，则单独的背景大小基本上会被重置和忽略。
因此，为了绕过这个问题，你只需要将它滚动到你已经在使用的背景速记中，方法是在背景位置后面添加一个斜杠，并包括你的尺寸：
background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;Stack Overflow用户
发布于 2017-11-29 01:05:53
应该避免"!important“。
我会像这样拆分所有的背景属性：
.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;
}Stack Overflow用户
发布于 2014-01-28 02:42:13
在后台使用!important速记会阻止background-size属性的应用，至少在Chrome中是这样。
删除!important可使背景调整生效。请参阅jsfiddle：http://jsfiddle.net/QVXsj/9/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21388712
复制相关文章
相似问题
腾讯云开发者
