背景尺寸不起作用 [英] Background-size doesn't work

问题描述

这是我的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 ++中未将sidenote突出显示为有效的CSS指令.与"background-size:20px;"相同或"background-size:20px auto;"

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

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

Am I missing something? Why does it not work?

推荐答案

作为背景尺寸的文档状态:

如果未在后台快捷方式中设置此属性的值 应用于背景大小CSS之后的元素的属性 属性，然后将该属性的值重置为其初始值 速记属性的值.

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.

换句话说，如果您使用的是shorthand属性，但不包括background-size规则作为其一部分，则实际上将重置并忽略单独的background-size.

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;

jsFiddle示例

jsFiddle example

这篇关于背景尺寸不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！