所以我试图通过单独的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;
}
答案 0 :(得分:2)
路径错误,请从css中的图片路径中删除../
。如果结构如你所说的那样。
在此处详细了解文件路径:https://www.w3schools.com/html/html_filepaths.asp和此处:https://css-tricks.com/quick-reminder-about-file-paths/
答案 1 :(得分:1)
路径规则如下所示: ../ 表示“上升一级”(即,直到文件夹) 包含样式文件夹); images / 表示“转到图像文件夹”;和bg.gif 指定该文件。
根据您提供的文件夹结构: 正确的方法是:
.second-background {
background-image:url("resources/assets/purpose.png");
}
#rectangle {
width: 1110px;
height: 105px;
background-color: #ffffff;
}
希望有所帮助