Question

我有一张我在页面上显示的图片。这是我的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可用，但它没有显示在页面上。我做错了什么？

Answer 1

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

DNS

Answer 2

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

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

Answer 3

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

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