Всем доброго времени суток!
У меня образовалась следующая проблема — неправильно применяется класс с моим оверлеем.
Ниже я представляю код, который я уже сделал.
HTML<header>
<div class="overlay"></div>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">MoGo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<p class="lead">Creative Template</p>
<h1 class="display-4">Welcome to MoGo</h1>
</div>
</div>
</header>
CSSheader {
background: url(../images/background.jpg) top center no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: rgb(243,129,129,.9);
background: -moz-linear-gradient(top, rgba(243,129,129,.9) 0%, rgba(252,227,138,.9) 100%);
background: -webkit-linear-gradient(top, rgba(243,129,129,.9) 0%,rgba(252,227,138,.9) 100%);
background: linear-gradient(to bottom, rgba(243,129,129,.9) 0%,rgba(252,227,138,.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38181', endColorstr='#fce38a',GradientType=0 );
}
header .navbar-light .navbar-brand,
header .navbar-light .navbar-brand:hover {
color: #fff;
font-size: 30px;
font-weight: 700;
font-family: Montserrat;
}
Здесь я использовал псевдокласс ::before, вместо того, чтобы создавать новый класс. Но и это тоже не помогло. Может, кто-нибудь найдет мою ошибку.
Буду всем признателен!
Простой
Простой
