Anonymous
Сплошной цвет фона применяется с некоторой прозрачностью.
Сообщение
Anonymous » 17 ноя 2024, 18:08
у меня в «#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
1731856084
Anonymous
у меня в «#headerPop» установлен белый цвет фона, но он имеет некоторую прозрачность, даже если я меняю цвет на черный, я все равно вижу элементы под ним кстати, этот пользовательский интерфейс создан для мобильных устройств, поэтому будет глупо проверять, работает ли он на настольном компьютере, поэтому я настоятельно рекомендую просмотреть его в режиме телефона в инструментах веб-разработчика. [code]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();[/code] [code]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; }[/code] [code] [*] 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. [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/79197447/solid-color-background-is-applying-with-some-transparency[/url]