我的CSS背景图片未显示

问题描述：

我正在使用以下CSS在页面上显示背景图片。但是，我所得到的只是一个空白的白色背景。我一直在搜索，但无法弄清楚我在做什么错...有什么建议吗？我的CSS背景图片未显示

CSS：

#home_body { 
    background: url(/resources/images/main_tree.png) no-repeat; 
}

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Welcome</title> 
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"> 
</head> 
<body id="home_body"> 
    <div> 
     <h1 class="main_heading">Welcome</h1> 
    </div> 

    <div id="home_nav"> 
     <nav> 
      <ul id="main_menu"> 
       <li><a href="gv_shop.html">Shop</a></li> 
       <li><a href="gv_gallery.html">Gallery</a></li> 
       <li><a href="gv_about.html">About Us</a></li> 
       <li><a href="gv_news.html">News</a></li> 
       <li><a href="gv_contact.html">Contact Us</a></li> 
      </ul> 
     </nav> 
    </div> 
</body> 
</html>

问题寻求帮助的代码必须包括必要的最短的代码重现它在**的问题本身**最好在[**堆栈片段* *]（https://blog.*.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://*.com/help/mcve） –

什么是您的html代码？你有没有在控制台上的错误（例如没有创建PNG） – AlainIb

相对于你的CSS文件的网址？您的网络控制台（F12）对加载的图像有何评论？它是否正确加载？ – GolezTrol

答

1）如果要复制图片的网址贴到您的浏览器做图像显示？

2）用单引号引用CSS类图像引用。

3）检查你的引用，如果引用从根图像作为CSS <root>/resources/images/main_tree.png但是HTML页面是要求相对resources/css/main.css CSS文件，一切应该是根引用（让所有地址页面应以/开头）。

4）检查没有其他类或CSS规则应用于<body>元素，并“覆盖”您的背景。

5）尝试使用background-image而不是背景速记。但要记住把不重复在一个新的属性： -

background-image: url('/resources/images/main_tree.png'); 
background-repeat: no-repeat;

这包括解决方案和几乎涵盖所有基地，谢谢。 – Totem

不用担心，@图腾很高兴你把它分类。使用Firebug或Google Chrome Inspector等工具可以对页面上的CSS规则进行“实时”评估，以确定链条中哪些部分无法正常工作，这很方便。 – Martin

答

#home_body { 
background-image: url(/resources/images/main_tree.png) no-repeat;}

改变CSS类查看原图

这不是一个类，这是一个属性。 – Martin

我试过这个，它似乎没有什么区别。 – Totem

背景图片不应显示重复属性。 – Martin

我的CSS背景图片未显示

相关推荐