背景大小不适用于 FF；不显示 CSS 图片？

Question

我有一张适合登录屏幕中间的大图片。它显示 IE10 和 Chrome 正常。但它在 Firefox (36.0.1) 上没有显示任何内容。

 @media screen and (min-width: 401px) {
    body {
        background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;                                 
        background-size: auto 90%;
        -moz-background-size: auto 90%;
        -webkit-background-size: auto 90%;
        background-origin: content-box;                
    }
}

@media screen and (max-width: 400px) {
    body {
        background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;                                    
        background-size: 600px;
        -moz-background-size: 600px;
        -webkit-background-size: 600px;
        background-origin: content-box;
    }
}

我不知道我哪里做错了。在 Mozilla Developer Network 中，它显示了使用 background-size 的方法；我已经将每个元素单独放置而不是简写。但是没有任何效果，我现在很困惑。对于大于 401px 的屏幕尺寸不显示任何图像。但是对于 400px 或更小的屏幕，它会显示错误的图像。

Answer 1

在我看来你想要this。

html {height: 100%;}
body {
    min-height: 100%;
    background: url("http://globe-views.com/dcim/dreams/camel/camel-06.jpg") center no-repeat #2b984b;
    background-origin: content-box;
}

@media screen and (max-width: 400px) {
    body {
        /* -moz-background-size: 90% auto;
        -webkit-background-size: 90% auto; */
        background-size: 90% auto;
    }
}

@media screen and (min-width: 401px) {
    body {       
        /* -moz-background-size: 600px;
        -webkit-background-size: 600px; */
        background-size: 600px;
    }
}

我做了什么：

调整值：在小 window 尺寸（最大宽度：400 像素）上设置响应式百分比宽度，在大屏幕上设置固定尺寸。虽然我建议将断点设置为背景大小的大小。（给或取几个像素）
将共享属性移至 body 媒体查询之外
更改了第一个媒体查询中背景大小的值：首先是宽度：90%，然后是高度：自动。因此，背景图像将始终是其父图像的 90%，并具有自动高度。
将带前缀的行（特定于浏览器）放在不带前缀的行（W3C 标准）之前。浏览器应该始终使用最新的技术实现，在这种情况下是没有前缀的。不过，背景大小是 widely supported，所以我认为您根本不需要任何前缀。

Answer 2

谢谢@Bram Vanroy。您的解决方案在改变了几件事后实际上起作用了。这是对我有用的代码。

html {
    height: 100%;
}

body {
    max-height: 90%;
    background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;
    background-origin: content-box;
}

@@media screen and (min-width: 401px) {
    body {
        background-size: auto 90%;
        -moz-background-size: auto 90%;
        -webkit-background-size: auto 90%;
        background-origin: content-box;
    }
}

@@media screen and (max-width: 400px) {
    body {
        background-size: 600px;
        -moz-background-size: 600px;
        -webkit-background-size: 600px;
        background-origin: content-box;
    }
}

背景大小不适用于 FF；不显示 CSS 图片？

background-size is not working on FF; doesn't show the CSS image?

css

firefox