目录:
索引.html
图片
(在图像文件夹内)Logo.png
CSS
.landing-page_logo{
display: block;
background-image: url("Images/Logo.png");
width: 300px;
height: 300px;
background-size: cover;
}
<section class="landing-page">
<div class="landing-page_logo">
</div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
图像位于正确的文件夹中。尝试使用
<img>
标签,效果很好。但背景图像标签不起作用
如果您的图像位于文件夹中,请尝试此操作 背景图像:url(/resources/Images/Logo.jpg); 不要忘记在第一个文件夹前面加上反斜杠。
确保包含 css 样式表的链接。
你的 html 应该看起来像这样:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="landing-page">
<div class="landing-page_logo"></div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
</body>
</html>
当然,请确保将“style.css”更改为您的CSS文件名。
问题似乎与您的文件夹结构有关。背景图片是一个CSS概念,应用于CSS文件中,因此使用的相对路径必须是相对于CSS文件本身,而不是相对于HTML文件。
从您共享的信息来看,您的CSS文件似乎存在于CSS文件夹中,该文件夹与Images文件夹平行。因此,您的网址中的路径应该是 ../Images/Logo.png
希望这能解决您的问题。