Question

我的CSS中没有显示图像。我对CSS不太满意，所以我不知道我做错了什么。在此之前，我重新制作了文件结构。我不知道我在更改CSS文件中的路径时做错了什么。如果单击以跟随vscode中的链接，则会打开图像。

CSS：

.home_banner_area {
  z-index: 1;
  background: url(../img/home-banner.jpg) no-repeat center center;
  background-size: cover; }

图像应呈现的HTML：

<section class="home_banner_area">
        <div class="banner_inner">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="home_left_img">
                            <img class="img-fluid" src="resources/img/home-left.png" alt="">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner_content">
                            <h2>
                                For All Occasion <br>
                                HairStyle is a Must <br>
                                Try Fashion
                            </h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or incididunt ut labore et dolore
                                magna aliqua. Ut enim ad minim.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

我的文件结构：

编辑：

由于某种原因，它既有home_banner_area又有banner_area，我用正确的内容进行了编辑。我不好。

Answer 1

您不是要通过CSS的类名来引用div元素吗？您具有“ .banner_area”，并且HTML上没有具有该类名称的元素。在CSS上重命名。

Answer 2

css属性中传递的路径必须相对于页面上下文，而不是相对于文件系统。要找出图像的路径，请尝试使用浏览器访问图像url，然后在url()属性中输入上下文路径。

例如：

如果该站点在localhost:8080/中打开，并且包含图像的文件夹已映射到您的http服务器上，则路径可能是localhost:8080/img/home-banner.png，然后是要插入background-image中的路径将为/img/home-banner.png。

链接到CSS的图像未显示

2 个答案: