1

我一直有一个问题，如果拍摄背景图像我无法看到这个图像，直到我给包含一个固定的宽度：

<div class="picture">
</div>

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
}

这不起作用。即使我像这样更新它，图像也不会显示。

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
width: 100%;
height: 100%;
}

仅当我添加基于像素的宽度和高度时，图像才能正确显示，但我只想要流体网格中基于百分比的值。

解决方案是什么？我可以在没有包含 div 的基于像素的宽度和高度的情况下显示背景图像吗？

谢谢！

编辑：这是我的问题的 jsfiddle。除非我使用基于 px 的高度，否则我无法显示图片：http: //jsfiddle.net/t3YZt/

4

2 回答 2

1

为确保您的背景容器有任何宽度，您应该自己处理（将其高度设置为（其父级的）的 100% 或任何其他固定高度，或任何依赖于内部子级的自动高度）。

然后，您对背景执行以下操作：

.picture{
    background-size:cover; /* this way */
    background-size:content; /* or this one */
}

...根据其容器大小拉伸图像。

于 2013-11-10T20:07:03.063 回答
1

尝试为容器添加一些高度，例如 body：

html, body {
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
.picture {
    background-image:url(http://s23.postimg.org/kewe6boez/test_background_image.png);
    background-size: 100%;
    width: 100%;
    height: 100%;
}

JSFIDDLE

于 2013-11-10T20:00:48.303 回答