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;
}

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

1 个答案: