CSS

Question

.main_banner {
    background-image: url("../images/main_banner.png");
    width: 100%;
    height: auto;
}

<!DOCTYPE html>
<html>
    <heading>
        <title>
            **********
        </title>
        <link rel="stylesheet" href="styles/styles.css" type="text/css" /> 
    </heading>
    <header>
        <nav>
            <!--Navigation Placeholder-->
        </nav>
    </header>
    <body>
        <div class="main_banner">
            <!--Main Banner-->
        </div>
        <div class="main_content">
        </div>
    </body>
</html>

我的 HTML 中有一个 div 标签分配了 main_banner 的 class。
出于某种原因，我无法显示样式表中指定的图像。
我的主项目文件夹包含以下内容：index.html、images（文件夹）和 styles（文件夹）。我的图片 main_banner.png 位于我的 images 文件夹中。

我错过了什么？

.main_banner {
    background-image: url('../images/main_banner.png');
}

Answer 1

假设您已正确引用样式 sheet，则需要在 CSS 中指定宽度和高度。 DOM 只会将您的块元素视为空。指定高度和宽度后，您的图像就会显示出来。

.main_banner {
    background: url("../images/main_banner.jpg");
    /*background: url("https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=");*/
    width: 100%;
    height: 300px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>
            **********
        </title>
        <link type="text/css" rel="stylesheet" href="styles/styles.css" /> 
    </head>
    
    <body>
        <header>
            <nav>
                <!--Navigation Placeholder-->
            </nav>
        </header>

        <div class="main_banner">
            <!--Main Banner-->
        </div>
        <div class="main_content">
        </div>
    </body>
</html>

CSS - 背景图像 属性 不会显示图像

CSS - background-image property won't show image

html

background-image

CSS - 背景图像属性不会显示图像