為什么不使用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和此處： 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;
          }

希望能幫助到你