图像无法在CSS中工作的相对路径

Question

我的css文件位于：media文件夹中。 我的图片位于：media/msg文件夹。

这是css文件的设置：

.info {
    color: #00529B;
    border-color: #789FCC;
    background-color: #CDEAF7;
    background-image: url('/msg/info.png');
}

.success {
    color: #264409;
    border-color: #C6D880;
    background-color: #E6EFC2;
    background-image:url('/msg/success.png');
}

.warning {
    color: #514721;
    border-color: #FFD324;
    background-color: #FFF6BF;
    background-image: url('/msg/warning.png');
}

.error {
    color: #8A1F11;
    border-color: #FBC2C4; 
    background-color: #FBE3E4;
    background-image: url('/msg/error.png');

图片未加载。 当我从浏览器“检查元素”时，它告诉我“无法加载图像”。

据我所知，它应该采用我的css文件的相对路径并添加图像的路径......但它不起作用。

我该怎么办？

Answer 1

问题是因为你正在用/...

开始你的路径

'/msg/error.png' => base_url/msg/error.png
'msg/error.png' => css_url/msg/error.png

所以只需删除/就可以了。

Answer 2

您的CSS将根据导入它的文件进行评估。

为避免任何问题，请始终根据文档根目录提供图像和其他文件的路径：

/media/msg/warning.png