背景没有出现在div中答案

【问题标题】：Background not appearing in div背景没有出现在div中
【发布时间】：2019-05-06 05:14:10
【问题描述】：

我正在尝试添加横幅图片并通过 CSS 调整其大小。 IMAGE 和 CSS 位于同一个文件夹中，彼此相邻。

HTML

<body>
<header>

    <div class="banner"></div>

CSS

div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;

}

【问题讨论】：

标签： html image background-image

【解决方案1】：

您在该元素中没有内容，因此它的高度为 0 => 没有可见背景。只需添加一些内容，背景就会出现。

如果父元素没有设置高度，height 设置无效。如果您希望横幅为窗口高度的 25%，请添加此规则：

html, body {
  height: 100%;
}

【讨论】：

这不起作用。我在 div 中添加了一些文本，文本出现了，但没有背景。
.banner { background-image: url("games_header.jpg");显示：块；高度：100%； }
你好
再次查看您的 HTML：如果 header 元素不包含除 banner DIV 之外的任何其他内容，则它还需要一些高度设置。

【解决方案2】：

我把它全部放在我创建的 html 文件中，这适用于我在同一目录中的图像。您不需要将其称为 div.banner，将类添加到 div 就足以通过您的名称来调用它。

    <head>

    <style>
        .banner{
            height: 100%;
            background-image: url('./butterbot.jpg');
            background-repeat: no-repeat;
        }
    </style>


</head>
<body>
    <header>
        <div class="banner"></div>
    </header>
</body>

【讨论】：

【解决方案3】：

background 是一个内联属性，如果您将背景样式设置为<body>（只是一个示例），它将与诸如html 或body 属性的根元素一起使用。虽然不建议在html 和body 上使用它，但它是一个具有 100% 宽度和高度的固定位置 div，如下所示

.banner {
  background: url("https://picsum.photos/200") no-repeat fixed center;
  position: fixed;
  height: 100%;
  width: 100%;
}

&lt;div class="banner"&gt;&lt;/div&gt;

【讨论】：