Question

这是我的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;
}

与所有其他风格相反，“背景大小：20px;”对我的页面没有影响，在Firebug中不可见，并且旁注不会在Notepad ++中突出显示为有效的CSS指令。与“background-size：20px;”相同或“background-size：20px auto;”

我错过了什么吗？为什么不起作用？

Answer 1

作为background-size docs州：

如果未在后台速记中设置此属性的值在background-size CSS之后应用于元素的属性属性，然后将此属性的值重置为其初始值通过速记属性的价值。

换句话说，如果您使用速记属性但不包含背景大小规则作为其一部分，则单独的背景大小基本上会重置并被忽略。

因此，为了解决这个问题，你只需要在背景位置之后添加一个斜杠并包括你的尺寸，将它滚动到你已经使用的背景速记中：

background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;

<强> jsFiddle example

Answer 2

您在后台速记中使用!important会阻止background-size属性应用，至少在Chrome中是这样。

删除!important可使背景大小生效。请参阅jsfiddle：http://jsfiddle.net/QVXsj/9/

Answer 3

＆＃34;！重要＆＃34;应该避免。

我会将所有背景属性分开：

.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;   
}

背景大小不起作用

3 个答案: