背景尺寸不起作用

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

與所有其他樣式相反，“ background-size：20px;” 對我的頁面沒有影響，在Firebug中不可見，並且在Notepad ++中，作為補充說明未作為有效的CSS指令突出顯示。 與“ background-size：20px;”相同 或“ background-size：20px auto;”

我想念什么嗎？ 為什么不起作用？

Answer 1

如背景尺寸文檔所述 ：

如果此屬性的值未在background-size CSS屬性之后應用於該元素的背景速記屬性中設置，則該屬性的值將由shorthand屬性重置為其初始值。

換句話說，如果您使用速記屬性，但不包括background-size規則作為其一部分，則實際上將重置並忽略單獨的background-size。

因此，要解決該問題，只需將其滾動到已使用的背景速記中，方法是在背景位置后添加斜線並包括您的尺寸：

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

jsFiddle示例

Answer 2

您在背景速記中使用!important至少在Chrome中無法應用background-size屬性。

刪除!important可使背景大小生效。 參見jsfiddle： http : //jsfiddle.net/QVXsj/9/

Answer 3

應避免使用“！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;   
}