背景大小不适用于 FF；不显示 CSS 图像？答案

【问题标题】：background-size is not working on FF; doesn't show the CSS image?背景大小不适用于 FF；不显示 CSS 图像？
【发布时间】：2015-03-08 19:43:09
【问题描述】：

我有一张大图片可以放在登录屏幕的中间。它在 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 开发者网络中展示了background-size 的使用方式；我已经单独放置了每个元素，而不是短手。但是没有任何效果，我现在很困惑。对于大于 401px 的屏幕尺寸不显示任何图像。但是对于 400px 或更小的屏幕，它显示图像但错误。

【问题讨论】：

当使用浏览器特定样式（即您使用的前缀规则）时，请将它们放在 W3C 标准之前！另外，你确定你不是指90% auto，而不是auto 90%？
How come Firefox can't read an image path with a space when placed inside css?的可能重复

标签： css firefox

【解决方案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;
    }
}

我做了什么：

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

【讨论】：

您的解决方案在更改了几件事后实际上起作用了。非常感谢你的伙伴。 (y)

【解决方案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;
    }
}

【讨论】：