Html 使用不同类的CSS背景图像

我有一个简单的项目，其中有一个产品页面。飞溅（全宽，固定高度div）将显示一个背景图像，该图像将根据部门的不同而变化

我在custom.CSS文件中使用以下CSS类创建了splash

。页面启动{
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
填充：180px 50px；
高度：600px；
}

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

.splash巧克力{
背景图片：url（“abc.jpg”）；
}
.泼洒蔬菜{
背景图片：url（“123.jpg”）；
}

---

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

我是否采取了错误的方法？还是我犯了一个我忽略的语法错误？（图像文件/部门名称，例如chocolate，已针对该问题简化）

---

一如既往，非常感谢所有帮助

编辑-感谢linus的更正：

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

---

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

“加载时会导致我的页面崩溃。”有错误消息吗？没有错误消息@BenjaminPoignant It firefox一直在旋转，好像它试图继续加载，但图像不显示。我已经删除了代码，并尝试在一个类中完成所有操作，因此我猜当我尝试将两个类嵌套在一起时，会出现错误？您确定图像的路径正确吗。图像的url路径将生成：site.com/abc.jpg。您将图像存储在项目中的何处？假设您有一个这样的项目结构：project/images/abc.jpg，css中的url应该是url（“/images/abc.jpg”）看不到任何问题：@Lal:颠倒顺序应该更改什么？哪个属性？如果你的意思是背景大小：即使这样，图像也应该显示（虽然大小不正确），因为它会被忽略。对不起，我指的是背景图像。在w3schools，它说IE12在这方面是完全受支持的。除了w3schools是一个不好的参考，你可能误读了这个表。它说Edge 12已经完全支持IE，从版本4开始。实际上，这并不是真的，因为例如IE4不支持渐变，但对图像使用

背景图像
是非常基本的。这与浏览器问题非常不同，但也有你指出的错误路径。
<div class="page-splash splash-chocolate"></div>