Сплошной цвет фона применяется с некоторой прозрачностью. ⇐ CSS

[Anonymous]

Я работаю над меню для мобильных устройств. Когда мы открываем меню, сквозь него виден фон.
У меня в #headerPop установлен белый цвет фона, но он не работает должным образом, и элемент, стоящий за ним, виден, даже если я меняю цвет на черный, я все равно вижу элементы под ним.
Кстати, этот пользовательский интерфейс создан для мобильных устройств, поэтому на настольном компьютере он будет выглядеть глупо, пожалуйста, просмотрите его в режиме телефона в веб-разработчике инструменты.

Код: Выделить всё

function getBID(elementName) {
return document.getElementById(elementName);
}

const driverImg = getBID("driverImg");
const namee = getBID("name");
const logoBox = getBID("logoBox");
const namedisc = getBID("namedisc");
const start = getBID("start");
const display = getBID("display");
const headerHamburger = getBID("headerHamburger");
const headerLogo = getBID("headerLogo");
const header = getBID("header");
const headerPopLi = document.querySelectorAll("#headerPop ul li");
const headerPop = getBID("headerPop");

driverImg.onload = function () {
namee.style.fontSize = logoBox.offsetHeight / 2 + "px";
driverImg.style.left = namee.offsetWidth + "px";
logoBox.style.width = namee.offsetWidth + driverImg.offsetWidth + "px";
logoBox.style.left = (start.offsetWidth - logoBox.offsetWidth) / 2 + "px";
namedisc.style.width = namee.offsetWidth + "px";
namedisc.style.top = namee.offsetHeight + "px";
};
function wait(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
await wait(3000);
start.style.visibility = "hidden";
display.style.visibility = "visible";
headerHamburger.style.height = headerLogo.offsetHeight + "px";
headerHamburger.style.top =
(header.offsetHeight - headerHamburger.offsetHeight) / 2 + "px";
const liHeight = headerPop.offsetHeight / 5;
headerHamburger.onclick = function () {
const d1 = window.getComputedStyle(headerPop).visibility;
if (d1 == "visible") {
headerPop.style.visibility = "hidden";
} else {
headerPop.style.visibility = "visible";
}
};
headerPopLi.forEach((li) => {
li.addEventListener("click", () =>  {});
li.style.height = liHeight + "px";
li.style.fontSize = liHeight / 2 + "px";
if (li.innerHTML == "Home") {
li.style.borderTop = "1px solid black";
}
});
}

run();

Код: Выделить всё

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#start {
background-color: rgba(72, 188, 132, 0.425);
height: 100%;
width: 100%;
overflow: hidden;
}
#logoBox {
position: absolute;
height: 10%;
top: 30%;
}
#name {
position: absolute;
color: rgb(72, 188, 132);
margin: 0;
top: 10%;
}
#driverImg {
position: absolute;
height: 80%;
top: 10%;
}
#namedisc {
font-family: "Courier New", Courier, monospace;
position: absolute;
color: rgb(72, 188, 132);
text-align: center;
}

#display {
position: absolute;
top: 0;
left: 0;
margin: 0;
height: 100%;
width: 100%;
visibility: hidden;
}

#header {
position: fixed;
left: 0;
top: 0;
height: 10vh;
width: 100%;
background-color: rgba(72, 188, 132, 0.425);
}

#headerLogo {
position: absolute;
height: 70%;
top: 30%;
left: 15%;
}

#headerHamburger {
position: absolute;
right: 15%;
filter: invert(1);
}

#headerPop {
position: fixed;
top: 10%;
left: 0;
height: 27%;
width: 100%;
text-align: center;
background-color: white;
visibility: hidden;
}

#headerPop ul {
margin: 0;
padding: 0;
}

#headerPop ul li {
font-family: "Courier New", Courier, monospace;
font-weight: 800;
color: black;
align-content: center;
border-bottom: 1px solid black;
}

#body {
position: relative;
top: 10vh;
width: 100vw;
}

#home {
position: relative;
height: 80vh;
width: 100vw;
}

#services {
position: relative;
height: 80vh;
width: 100vw;
}

#caption {
position: relative;
margin: 3vh auto;
width: 80vw;
font-family: "Courier New", Courier, monospace;
color: rgb(72, 188, 132);
text-align: center;
font-size: 2vh;
font-weight: 800;
}

#home h1 {
position: relative;
margin: 3vh auto;
width: 80vw;
color: rgb(43, 43, 43);
text-align: center;
font-size: 3vh;
}

Код: Выделить всё

[*]




Carnex
[img]./resources/driver.png[/img]
Book Drivers




LOGO HERE
[img]./resources/hamburger.png[/img]

[list]
Home
[*]Services
[*]become a driver
[*]About Us
[*]Contact US
[/list]


Hire drivers with ease
Reliable Drivers for Your Car, Anytime, Anywhere.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ansparency