图像不能在CSS中工作的相对路径 [英] relative path to images not working in CSS

问题描述

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

这是css文件的设置：

  .info {
颜色：＃00529B; 
 border-color：＃789FCC; 
背景颜色：＃CDEAF7; 
 background-image：url（'/ msg / info.png'）; 
} 
 
 .success {
颜色：＃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文件，并添加到图像的路径...但它不起作用。

我该怎么做？

解决方案

问题是因为你开始使用/...

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

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

My css file is in: media folder. my images are in: media/msg folder.

This is the setting of the css file:

.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');

The images are not loading. When I do "inspect element" from browser it tells me "could not load the image".

as far as I know it should take the relative path of my css file and add the path to the image... but it doesn't work.

What do I do?

解决方案

The problem is because you are starting your paths with /...

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

So just removing the / will work.

这篇关于图像不能在CSS中工作的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！