Html 背景不出现在div中_Html_Image_Background Image

Html 背景不出现在div中

html image

Html 背景不出现在div中,html,image,background-image,Html,Image,Background Image,我试图添加一个横幅图像，并根据CSS调整其大小。图像和CSS位于同一文件夹中，彼此相邻 HTML }该元素中没有内容，因此其高度为0=>无可见背景。只需添加一些内容，背景就会出现如果父元素没有设置的高度，height设置无效。如果希望横幅为窗口高度的25%，请添加以下规则： html, body { height: 100%; } 该元素中没有内容，因此其高度为0=>无可见背景。只需添加一些内容，背景就会出现如果父元素没有设置的高度，height设置无效。如果希望横幅为窗口高度的25%

我试图添加一个横幅图像，并根据CSS调整其大小。图像和CSS位于同一文件夹中，彼此相邻

HTML

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

如果父元素没有设置的高度，

height

设置无效。如果希望横幅为窗口高度的25%，请添加以下规则：

html, body {
  height: 100%;
}

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

如果父元素没有设置的高度，

height

设置无效。如果希望横幅为窗口高度的25%，请添加以下规则：

html, body {
  height: 100%;
}

我把它全部放在我创建的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>


.横幅{
身高：100%；
背景图片：url（'./butterbot.jpg'）；
背景重复：无重复；
}

我将其全部放在我创建的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>


.横幅{
身高：100%；
背景图片：url（'./butterbot.jpg'）；
背景重复：无重复；
}

background

是一个内联属性，如果您将背景样式设置为

，则可以使用根元素，例如

html

或

body

属性（仅作为示例）。虽然不建议在

html

和

body

上使用它，但建议在100%宽度和高度的固定位置div上使用它，如下所示

.banner{
背景：url（“https://picsum.photos/200）无重复固定中心；
位置：固定；
身高：100%；
宽度：100%；
}

background

是一个内联属性，如果您将背景样式设置为

（仅举一个例子），它将与根元素（如

html

或

body

属性）一起使用。虽然不建议在

html

和

body

上使用它，但建议在100%宽度和高度的固定位置div上使用它，如下所示

.banner{
背景：url（“https://picsum.photos/200）无重复固定中心；
位置：固定；
身高：100%；
宽度：100%；
}

这不起作用。我向div添加了一些文本，文本出现了，但没有背景..banner{background image:url（“games_header.jpg”）；display:block；height:100%；}您好，再次查看您的HTML：

标题

元素需要一些高度设置，如果它不包含除

横幅

DIV以外的任何内容。这不起作用。我向div添加了一些文本，文本出现了，但没有背景。banner{background image:url（“games_header.jpg”）；display:block；height:100%；}您好，再次查看您的HTML：

header

元素如果不包含

banner

div以外的任何内容，则需要一些高度设置。