Question

我正在尝试添加横幅图像并通过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%;

}

Answer 1

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

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

html, body {
  height: 100%;
}

Answer 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>

Answer 3

background是一个内联属性，如果将背景样式设置为html（仅作为示例），它将与诸如body或<body>属性之类的根元素一起使用。尽管不建议在html和body上使用它，而是使用固定的div，其宽度和高度为100％，如下所示

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

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

背景未出现在div中

3 个答案: