gpt4 book ai didi

html - CSS - 背景图像属性不会显示图像

转载 作者:太空宇宙 更新时间:2023-11-04 01:05:28 25 4
gpt4 key购买 nike

.main_banner {
background-image: url("../images/main_banner.png");
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<heading>
<title>
**********
</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</heading>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<body>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>

我的 HTML 中有一个 div 标签分配了一个类 main_banner
出于某种原因,我无法显示样式表中指定的图像。
我的主元素文件夹包含以下内容:index.htmlimages(文件夹)和styles(文件夹)。我的图片 main_banner.png 位于我的 images 文件夹中。

我错过了什么?

.main_banner {
background-image: url('../images/main_banner.png');
}

最佳答案

假设您已正确引用样式表,则需要在 CSS 中指定宽度和高度。 DOM 只会将您的 block 元素视为空的。一旦您指定了高度和宽度,您的图像就会显示出来。

.main_banner {
background: url("../images/main_banner.jpg");
/*background: url("https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=");*/
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
**********
</title>
<link type="text/css" rel="stylesheet" href="styles/styles.css" />
</head>

<body>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>

<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>

关于html - CSS - 背景图像属性不会显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52323458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com