html - 使用不同类的 CSS 背景图像

Question

我有一个简单的元素，它有一个产品页面。启动画面(全宽，固定高度的 div)将显示背景图像，该图像会根据部门而变化。

我创建了启动画面 <div>在我的 custom.css 文件中使用以下 CSS 类。

.page-splash {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 180px 50px;
height:600px; 
}

然后我更进一步，为我想使用的每个背景图像创建一个单独的类。

.splash-chocolate {
background-image: url("abc.jpg");
}
.splash-vegetables {
background-image: url("123.jpg");
}

我在我的 html 文件中调用类，如下面的下一段代码所示这就是错误开始的地方。它会导致我的页面在加载时崩溃。

我采取了错误的方法吗？还是我犯了我忽略的语法错误？(图像文件/部门名称，例如巧克力已针对问题进行了简化)。

<div class="page-splash splash-chocolate"></div>

一如既往地感谢所有帮助!

Answer 1

编辑 - 感谢 linus 的更正:

检查以确保您具有正确的图像 url 路径。它可能正在尝试拉取图像但无法找到它

CSS background-image property not loading

如果您的 css 类位于单独的文件夹中，您可能需要在 url 属性中指定正确文件夹的路径。