无法显示背景图像答案

【问题标题】：Unable To Display Background Image无法显示背景图像
【发布时间】：2014-04-05 01:55:46
【问题描述】：

我正在尝试使用 100% div 包装器的响应式布局，然后在其上方和下方放置带有文本的背景图像。

无法显示。

希望通过浏览器窗口调整图像大小。

我做错了什么？

.wrapper {
    width: 100%;
}

.image {
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
}

.text {
    text-align: center;
    font-size: 50px;
    color: yellow;
}

http://jsfiddle.net/f5F6T/

【问题讨论】：

标签： css image background

【解决方案1】：

看起来您需要为 .image 元素指定高度和宽度。以及包装 div 的高度。

【讨论】：

【解决方案2】：

你需要在中间 div 中设置内容或给出高度。因为初始 div 没有任何高度，所以你怎么能看到背景？？

检查fiddle-

--HTML--

<div class="wrapper">
    <div class="text">Give the height to below div!</div>    
    <div class="image"></div>
    <div class="text">So, here u have ur photo</div>
</div>

--CSS--

.image {
   background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
   background-size: cover;
   height:100px;
}

【讨论】：

我将其设置为 600px 并调整大小。一开始它会同时改变 x 和 y 方向，但在某个点之后它只会调整 x 方向的大小。希望这是有道理的。我尝试了 100% 的高度，但这不起作用。这是不使用任何脚本的css的限制吗？想法？
100% 高度是什么？？直到容器没有内容或没有固定高度（200px、500px 等）为止，你能看到你在后台有什么吗？这是非常合乎逻辑的观点..

【解决方案3】：

你的 .image 实际上是 0px 高，这就是图像不显示的原因。看看这个：

只是将 .image 代码移动到 .text 代码中：

.text {
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
    text-align: center;
    font-size: 50px;
    color: yellow;
}

http://jsfiddle.net/f5F6T/1/

编辑：

.image {
    height: 30px;
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
}

http://jsfiddle.net/f5F6T/3/

【讨论】：

很抱歉，您已经在 .text 中设置了背景，他也知道如何设置背景，但他只想知道为什么给定的代码不起作用最好告诉错误或任何其他点..