为什么我的图片没有显示在我的 div 中？答案

【问题标题】：Why is my image not showing in my div?为什么我的图片没有显示在我的 div 中？
【发布时间】：2015-06-04 15:58:51
【问题描述】：

我在页面上显示了一张图片。这是我的css：

body {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
}

当我这样做时，一切都显示得很好。然后我尝试在div 中显示相同的图像。这是我的html：

<body>
    <div class="background-image"></div>
</body>

这是我的新css：

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
}

但现在什么都没有显示。我查看我的网络选项卡，我看到image 可用，但它没有显示在页面上。我做错了什么？

【问题讨论】：

标签： html css

【解决方案1】：

这是因为 div 的高度为 0 像素，给它一些高度，例如：

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
    height: 100vh;
}

【讨论】：

【解决方案2】：

由于您只使用背景，因此您需要在 div 本身上设置高度/宽度。

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
    height: */Your Value/*;
}

【讨论】：

【解决方案3】：

我建议删除 background-size: 100%; .. 而是将高度和宽度添加为 100%。

 body {
        background: url(./../imgs/beach.png) no-repeat;
        height: 100%;
        width: 100%;
    }

【讨论】：

我不能使用% 作为宽度。我必须设置一个特定的宽度，否则什么都不显示。
@jhamm 太糟糕了.. 试试这是否可行.. `body{ height: 100%;宽度：100%； } .background-image { 背景： url("Desert.jpg") 不重复；身高：继承；宽度：继承； }`