CSS 的background-image 属性不起作用

问题描述 投票:0回答:3

目录:
索引.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>
标签,效果很好。但背景图像标签不起作用

html css background-image
3个回答
3
投票

如果您的图像位于文件夹中,请尝试此操作 背景图像:url(/resources/Images/Logo.jpg); 不要忘记在第一个文件夹前面加上反斜杠。


2
投票

确保包含 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文件名。


0
投票

问题似乎与您的文件夹结构有关。背景图片是一个CSS概念,应用于CSS文件中,因此使用的相对路径必须是相对于CSS文件本身,而不是相对于HTML文件。

从您共享的信息来看,您的CSS文件似乎存在于CSS文件夹中,该文件夹与Images文件夹平行。因此,您的网址中的路径应该是 ../Images/Logo.png

希望这能解决您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.