为什么我的背景图片不会使用 CSS 显示？

Question

所以我试图通过单独的 CSS 文件调用背景图像。 HTML文件和CSS文件在同一层，但背景图片低两层。

示例：

index.html

stylesheet.css

资源>资产>背景图片

这是我的 html:

    <div class="second-background">
       <h2>Our</h2>
       <div class="purpose-heading"><h2>Purpose</h2></div>
       <p class="textstyle6">To provide unaccompanied runaway and homeless youth with a safe and nurturing environment where they can develop the needed skills to become active, healthy, successful members of our future world.</p>
       <div id="rectangle"><p class="textstyle2">7,085 MEALS SERVED. 511 DROP-IN SERVICES.<br/>245 STREET OUTREACH HOURS. 64 SHELTERED YOUTH.</p></div>
    </div>

这是我的CSS：

.second-background {
background-image:url("../resources/assets/purpose.png");
}
#rectangle {
width: 1110px;
height: 105px;
background-color: #ffffff;
}

Answer 1

路径错误，去掉css中图片路径中的../。如果结构像你说的那样。

在此处了解有关文件路径的更多信息：https://www.w3schools.com/html/html_filepaths.asp and here: https://css-tricks.com/quick-reminder-about-file-paths/

Answer 2

路径规则分解如下：../表示“上一层”（即向上到文件夹包含样式文件夹）；
images/ 表示“转到图像文件夹”； bg.gif 指定该文件。

根据您提供的文件夹结构：正确的方法是：

           .second-background {
              background-image:url("resources/assets/purpose.png");
            }
           #rectangle {
             width: 1110px;
             height: 105px;
              background-color: #ffffff;
          }

希望对您有所帮助

为什么我的背景图片不会使用 CSS 显示？

Why wont my background image show up using CSS?

html

css

background-image