javascript - Solid color background is applying with some transparency - Stack Overflow

admin管理员组

文章数量:1434960

I am working on menu for mobile devices. When we open the menu the background is visible through it.

I have a background-color set white in #headerPop but it is not working as expected and element behind it are visible even i change the color to black i still see elements beneath it.

By the way this ui is made for mobiles so it will be goofy on desktop kindly view it phone mode in web developer tools.

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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./mobile.css" />
  </head>
  <body>
    <div id="start">
      <div id="logoBox">
        <h1 id="name">Carnex</h1>
        <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
        <h1 id="namedisc">Book Drivers</h1>
      </div>
    </div>
    <div id="display">
      <div id="header">
        <h1 id="headerLogo">LOGO HERE</h1>
        <img src="./resources/hamburger.png" alt="hamburger icon" id="headerHamburger" />
      </div>
      <div id="headerPop">
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>become a driver</li>
          <li>About Us</li>
          <li>Contact US</li>
        </ul>
      </div>
      <div id="body">
        <section id="home">
          <div id="caption">Hire drivers with ease</div>
          <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
        </section>
        <section id="services"></section>
        <section id="aboutUs"></section>
        <section id="contactUs"></section>
      </div>
    </div>
    <script src="./mobile.js"></script>
  </body>
</html>

I am working on menu for mobile devices. When we open the menu the background is visible through it.

I have a background-color set white in #headerPop but it is not working as expected and element behind it are visible even i change the color to black i still see elements beneath it.

By the way this ui is made for mobiles so it will be goofy on desktop kindly view it phone mode in web developer tools.

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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./mobile.css" />
  </head>
  <body>
    <div id="start">
      <div id="logoBox">
        <h1 id="name">Carnex</h1>
        <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
        <h1 id="namedisc">Book Drivers</h1>
      </div>
    </div>
    <div id="display">
      <div id="header">
        <h1 id="headerLogo">LOGO HERE</h1>
        <img src="./resources/hamburger.png" alt="hamburger icon" id="headerHamburger" />
      </div>
      <div id="headerPop">
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>become a driver</li>
          <li>About Us</li>
          <li>Contact US</li>
        </ul>
      </div>
      <div id="body">
        <section id="home">
          <div id="caption">Hire drivers with ease</div>
          <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
        </section>
        <section id="services"></section>
        <section id="aboutUs"></section>
        <section id="contactUs"></section>
      </div>
    </div>
    <script src="./mobile.js"></script>
  </body>
</html>

• javascript
• html
• css

Share Improve this question Follow edited Nov 18, 2024 at 2:25 Naeem Akhtar 1,27411 gold badge1212 silver badges2323 bronze badges asked Nov 17, 2024 at 14:55 MinnuMinnu 3366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to set z-index: 1 to #headerPop.

Also, you need to be careful when you're working with css positions.

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;
  z-index: 1;
}

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

<div id="start">
  <div id="logoBox">
    <h1 id="name">Carnex</h1>
    <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
    <h1 id="namedisc">Book Drivers</h1>
  </div>
</div>
<div id="display">
  <div id="header">
    <h1 id="headerLogo">LOGO HERE</h1>
    <img
      src="./resources/hamburger.png"
      alt="hamburger icon"
      id="headerHamburger"
    />
  </div>
  <div id="headerPop">
    <ul>
      <li>Home</li>
      <li>Services</li>
      <li>become a driver</li>
      <li>About Us</li>
      <li>Contact US</li>
    </ul>
  </div>
  <div id="body">
    <section id="home">
      <div id="caption">Hire drivers with ease</div>
      <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
    </section>
    <section id="services"></section>
    <section id="aboutUs"></section>
    <section id="contactUs"></section>
  </div>
</div>

Hope, this helps.

本文标签： javascriptSolid color background is applying with some transparencyStack Overflow