Question

我的网站上有许多媒体查询，可以调整打击垫/智能手机上的各种元素。我刚刚添加了另一个媒体查询来调整低分辨率笔记本电脑上相同的元素，发现Firefox和Chrome似乎忽略了我对背景大小的使用。

媒体查询正在运行，其中部分内容正在被选中，但不是背景大小。它在野生动物园中运作良好。

任何想法为什么？

我的CSS是：

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background-size:95%;
        background: url(../img/title_we_are.png) bottom center no-repeat;
        height:254px;   
    }
}

Answer 1

您的background-size被置于background速记之前，因此the shorthand overrides it with its default value (auto)会阻止您之前的background-size声明产生任何效果。这是一个使用速记属性的common gotcha。

如果在Safari中有效，Safari很可能尚未更新其background简写以识别background-size值，从而允许background-size工作。

您需要切换它们，以便设置background-size值生效：

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background: url(../img/title_we_are.png) bottom center no-repeat;
        background-size:95%;
        height:254px;   
    }
}

Answer 2

附加信息：我已确定在chrome中使用“background-image：url（）”，后台大小不起作用。

只有在使用“background：url（）”简写时，background-size才会生效。

从Chrome 56.0.2924.87（64位）

开始也是如此

Answer 3

..因为他们有另一种css格式：

-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera

Firefox和Chrome忽略了背景大小？

3 个答案: