正文背景图像位于节背景色后面

Question

我对我的背景身体形象有一个问题。当我在不同的部分上添加颜色时，我想背景图像会在颜色后面消失，我不知道为什么。

如果我在正文上设置背景色，它可以工作，但我想在页面的每个部分使用不同的颜色。

这是线框:[wireframe][1]现在我有这个:[Project][2]

下面是部分代码。

function myFunction(tag) {
$("#cssmenu a.active").removeClass("active"); //remove previous li active class
$(tag).closest("a").addClass("active");
}

html, body {
height: 100%;
margin: 0; 
}
body {
background-image: url("https://montaigne-energie.fr/wp-content/uploads/2022/11/phare_blan3.svg");
background-position: 50% 2%;
background-repeat: no-repeat;
background-size: 140% auto;
background-attachment: local;
}
#home {
background-color: rgba(182, 166, 128, 0.8);
height: 100%;
}
#services {
background-color: rgb(33, 59, 82,.8);
height: 100%;
}
#valeurs {
background-color: rgba(182, 166, 128, 0.8);
height: 100%;
}
#missions {
background-color: rgb(33, 59, 82,.8);
height: 100%;
}
#section5 {
background-color: rgba(182, 166, 128, 0.8);
height: 100%;
}
#footer {
background-color: rgb(33, 59, 82,.8);
height: 100%;
}
.section{
min-height: 100%;
}
nav {
position: fixed;
top: 35%;
right: 2%;
bottom: auto;
z-index: 10;
}
.lader ul {
list-style: none;
padding: 0;
}
.lader li {
padding: 15px 0;
}
.lader span {
display: inline-block;
position: relative;
}
.circle {
height: 13px;
width: 13px;
left: 0;
border-radius: 50%;
border: 2px solid white;
background-color: none;
}
.lader a.active span {
background-color: white;
}
nav a:hover span {
background-color: #fff;
transition: 300ms;
}

<div class="section" id="home">

<nav class="lader" id="cssmenu">
<ul>
<li>
<a href="#home" class="active" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
<li>
<a href="#services" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
<li>
<a href="#valeurs" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
<li>
<a href="#missions" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
<li>
<a href="#section5" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
<li>
<a href="#footer" onclick="myFunction(this)">
<span class="circle"></span>
</a>
</li>
</ul>
</nav>
</div>
<div class="section" id="services"></div>
<div class="section" id="valeurs"></div>
<div class="section" id="missions"></div>
<div class="section" id="sections5"></div>
<div class="section" id="footer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

试试background-color: rgba(21, 45, 52, 0.3)。把你所有的背景色替换成这个。

这将使你的div背景颜色有一个alpha，这样你就可以从body元素看到背景图像。

Answer 2

你看不到颜色，因为你的div中没有任何内容。你可以给你的div添加一些东西，或者只添加下面的代码到你的CSS

div{
min-height: 100px;
}