html - 关于我们部分图片不会显示

Question

我试图在我网站的“关于我们”部分显示一张图片，但它没有出现，它在那里，因为如果我将图片拖到网站上，您可以看到它的缩略图。

我试过将图片移动到文件夹中的不同位置，尝试修改一些 CSS 以查看是否是问题所在，但我似乎无法找到解决方法

HTML

        <section id="about">
            <div class="container">
                <div class="section-header">
                    <h2>About Us</h2>
                </div>

                <center>

                    <img src="img/about%20us.jpg">
                    <br>
                    <br>

                    <h3>The Off Beats are a young punk band based in lichfield. Formed at college in late 2017, we love putting on high energy performances. We all love different styles of music so the songs we write have something for everybody. Our main influence is punk music. We started to form fully in 2018 creating a sound of our own and playing a few local gigs. This is where we first started to realise that we have a distinctive style.</h3>

                </center>
            </div>
        </section>

CSS

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

#about {
    background-size: cover;
    overflow: hidden;
    position: relative;
    color: rgb(0, 0, 0);
    padding: 60px 0 40px 0;
}

#about:before {
    content: "";
    background: rgba(255, 255, 255);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

#about h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #112363;
}

#about h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: black;
}

#about p {
    font-size: 20px;
    margin-bottom: 20px;
    color: green;
}

我希望图片显示在“关于我们”部分

显示问题的视频 https://youtu.be/uwxjTKFTx0Y

Answer 1

你有一个 before 伪元素，它被设置为覆盖它所定位的整个部分。尝试先完全删除这个伪声明，然后看看是否解决了问题(它应该)。

#about {
    background-size: cover;
    overflow: hidden;
    position: relative;
    color: rgb(0, 0, 0);
    padding: 60px 0 40px 0;
}

/* ——- remove this 
#about:before {
    content: "";
    background: rgba(255, 255, 255);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
*/

看起来您只是想向该部分添加全白覆盖。如果是这种情况，只需将它作为一个单独的元素添加到 #about 部分并为图像赋予更高的 z-index，如下所示:

<section id=“about”>
    <div class=“overlay”>
    <img src=“...”>
</section>

.overlay {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index: 25;
}

img {
   z-index: 50;
}