Question

我使用以下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>

Answer 1

1）如果您将图像URL复制粘贴到浏览器中，图像会显示吗？

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

3）检查您的引用，您在CSS中将根目录中的图像引用为<root>/resources/images/main_tree.png，但HTML页面要求提供相对resources/css/main.css CSS文件，所有内容应该是root引用的（因此页面上的所有地址都应以/开头）。

4）检查没有其他类或CSS规则应用于<body>元素，并且＆＃34;覆盖＆＃34;你的背景。

5）尝试使用background-image而不是背景速记。但请记住将no-repeat放入新属性中： -

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

Answer 2

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

更改css类以查看图像

我的CSS背景图片未显示

2 个答案: