背景大小不起作用

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 CSS属性之后的元素,则此属性的值将通过shorthand属性重置为其初始值.

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

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

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

jsFiddle例子