background-image相对url在CSS样式表中不起作用 [英] background-image relative url doesnt work in CSS stylesheet

问题描述

我将我的html和css样式表文件保存在img文件夹中的相同文件夹和图像中。

图像的相对链接适用于html： $ < img SRC = img\Philippines.png >


但是在我写的时候它在css中不起作用：

  #Philippines {
 background-image：url（../ img / UK.png）; 
  

当我放置完整的网址时，它可以正常工作：

  #Philippines {
 background-image：url（file：/// C：/Users/User/Dropbox/+HOROS%20code/img/Philippines.png ）; 
  

我希望它能与相关的url一起工作，有什么帮助吗？

解决方案

url中的url（）与CSS文件的位置有关。

如果我理解正确，这是您的文件夹结构：

   -  +  -  img 
 | +  -  images 
 + html_file 
 + css_file 
  

如果是这样，试试这个：

  #Philippines {
 background-image：url（img / UK.png）; 
} 
  

I am keeping my both html and css stylesheet files in the same folder and images in a "img" folder.

Relative links to images works on html:

<img src="img\Philippines.png">

but it doesn't work in css when i write:

#Philippines {
background-image:url("../img/UK.png");

it does work when i put full url:

#Philippines {
background-image:url("file:///C:/Users/User/Dropbox/+HOROS%20code/img/Philippines.png");

I want it to work with relative urls, any help?

解决方案

url() in CSS is relative to the location of your CSS file.

If I understand you correctly, this is your folder structure:

-+-img
 |  +--images
 +html_file
 +css_file

If so, try this:

#Philippines {
    background-image:url("img/UK.png");
}

这篇关于background-image相对url在CSS样式表中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！