Блог

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

Вот мой HTML-код, который я использовал, написан ниже:

 display: flex;
font-family: 'Kaushan Script', cursive;
}
.navbar::before {
content: "";
background-color: black;
position: absolute;
width: 100%;
height: 22vh;
z-index: -1;
opacity: 0.4;
}
.navbar img {
width: 61px;
height: 47px;
margin: 21px 29px;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar li a {
display: block;
text-decoration: none;
align-items: center;
margin: 45px 32px;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.navbar li a:hover {
background-color: rgb(87, 240, 26);
color: black;
font-size: 1.3rem;
border-radius: 15px;
}

 

Я бы удалил псевдоэлемент ::before в .navbar и переместил background-color:black его, который будет определен в .navbar стилях.

Вместо того, чтобы устанавливать фон на черный, установите для него значение RGBa, чтобы придать цвету непрозрачность, например:

 .navbar{
   background-color: rgb(0, 0, 0, 40%);
   display:flex;
}
 

Это приведет к тому, что элементы в панели навигации будут располагаться поверх цвета фона.