在 CSS 背景图像上始终失败

Question

在过去的两周里，我设法从头开始学习html和CSS。我在桌子和漂浮物上也有过黑暗的时刻，但到目前为止，我总是能够自己解决问题。

我无法让CSS背景/背景图像规则工作，如下所示：

<div class="mao"></div>
.mao {
background: url("mao.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;

我尝试在背景和背景图像之间切换。我尝试将文件移动到单独的 img 文件夹中。我已经尝试了各种规则组合，但它从未显示出来。事实上，我尝试使用的任何其他图像也是如此。

有什么想法吗？

Answer 1

尝试在div标签(或任何内容(中添加一些文本，或者给它一个宽度和高度，因为除非它被填充，否则它不会显示它的背景(或显示在屏幕上(

Answer 2

如果希望背景图像显示时没有任何文本，则需要在类属性中设置高度。

<style>
.mao{
background: url("mao.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
height: 300px; /*or whatever height you want*/
}
</style>

然后：

<div class="mao"></>

Answer 3

你可以在这里查看有关 css 背景属性的详细信息