我试图将背景应用于巨型屏幕。如果我使用内联样式,它工作正常,但在使用外部样式表时则不行。我已经正确链接了外部样式表,我可以更改其中巨型机器人的其他属性,但不能更改背景图像。任何帮助将不胜感激。谢谢
具有内联样式的 HTML:
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/homepage.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid" style=
"background-image:url('Images/background.jpg'); background-size:100% 100%">
<div class="container">
<h1 class="display-3">Welcome.</h1>
<p class="lead">Text</p>
</div>
<hr class="m-t-2">
</div>
<div id="cardDiv">
</div>
</body>
</html>
CSS:(高度有效,背景图像无效(
.jumbotron {
height: 400px;
background-image: url('Images/background.jpg');
background-size: 100% 100%;
}
一种可能的解决方法可能是您的文件目录配置不正确。
作为良好做法,请遵循以下操作:
root
|
index.html
<other html files>
CSS Folder/
|
<CSS files>
Images Folder/
|
<image files>
至于解决方案:试试这个:
.jumbotron {
height: 400px;
background-image: url('../Images/background.jpg');
background-size: 100% 100%;
}
我想你的文件夹结构如下所示:
- index.html
- CSS/
-- homepage.css
-- bootstrap.min.css
- Images/
-- background.jpg
HTML 文件中 Images/
文件夹的路径将与homepage.css
文件中的路径不同。您需要使用相对路径来访问Images
文件夹,该文件夹应该高一级。可以使用 ..
在 CSS url()
属性中的文件夹结构中上一级。
.CSS
.jumbotron {
height: 400px;
background-image: url('../Images/background.jpg');
background-size: 100% 100%;
}