Question

我有一个非常简单的HTML页面，我想设置为我的＆＃34; jumbotron＆＃34;背景图片，但不起作用。

我使用Bootstrap 4.0 BETA安装使用PhpStrom IDE。 -s在该部分中正确设置，自定义CSS文件已在bootstrap css链接之后设置。

我很无能，我认为应该一直有效，但事实并非如此。

我的HTML是：

＆＃13;

.ipcs {
    background-image: url("/pics/animals.png");
    background-size: cover;
    background-repeat: no-repeat;
}

＆＃13;

<div class="container">
<div class="jumbotron ipcs">
	<h1 class="display-3" >LOREM IPSUM</h1 >
	<p class="lead" >.................</p >
	<hr class="my-2" >
	
	<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur deleniti ea exercitationem impedit
	    molestiae neque pariatur ratione unde, velit? Amet delectus, doloribus eveniet minus numquam quas quis ratione
	    suscipit!</p >
</div >
</div>

＆＃13;

Answer 1

根据您引用的评论，您接近这笔钱

＆＃34;好吧，我刚检查了我的chrome浏览器中的代码，并且consol包含一条错误消息：无法加载资源：net :: ERR_FILE_NOT_FOUND --- animals.png＆＃34;

表示无法找到您尝试放置的背景图片，您可以通过使用在线占位符生成器（例如http://placehold.it/500x300

替换背景图片链接来运行疑难解答来确认此问题

Answer 2

是的，这是相对绝对路径问题。必须根据CSS文件目录的相对路径计算图片的路径。如果目录结构是fllowing

/project/css/custom.css ....
/project/pics/animals.png ....
/project/index.html ....

您必须在CSS文件中设置URL定义，如下所示：

.customJumbotron {
backround-image : url("../pics/animals.png");
}

第一个..带你一个目录“更高”，你可以从那里设置图片文件的网址。那就是问题所在。在这种情况下，必须省略第一个斜杠。

小事重要......

我无法在bootstrap 4中设置一个jumbotron背景图像

2 个答案: