Question

我正在尝试使用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/

Answer 1

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

Answer 2

你的.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/

Answer 3

你需要在中间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;
}

无法显示背景图像

3 个答案: