6

I have a number of media queries in my site that resize various elements on pads/ smartphones. I've just added another media query to resize the same elements on lower-resolution laptops and discovered that Firefox and Chrome seems to be ignoring my use of background-size.

The media query is working, parts of them are being picked up, but not background-size. It works fine in safari.

Any ideas why?

My CSS is:

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

3 回答 3

22

你background-size被放在你的background速记之前，所以速记用它的默认值 ( )覆盖它auto，防止你之前的background-size声明生效。这是使用速记属性的常见问题。

如果这在 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;   
    }
}
于 2013-04-11T14:42:51.777 回答
1

附加信息：我已经确定在 chrome 中使用“背景图像：url（）”，背景大小不起作用。

只有在使用“background: url()”速记时 background-size 才有效。

从 Chrome 56.0.2924.87（64 位）开始就是如此

于 2017-02-06T16:37:05.527 回答
0

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

-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera
于 2013-04-11T13:56:20.307 回答