У меня полупрозрачный фон для header, но текст там тоже становится полупрозрачным, я хочу этого избежать и сделать через rgba
, но у меня прописан linear-gradient. Как можно с помощью rgba
сделать градиент и добавить прозрачность в последнее значение?
Вот так?
.header_area.sticky {
/* background-color: #f0f0f0;*/
background: linear-gradient(to right, #FF0800, #80FF00);
opacity: 0.9;
height: 70px;
position: fixed;
top: 0;
z-index: 99;
}
.header_area.sticky .menu_area .navbar-brand {
font-size: 50px;
}
.header_area.sticky .menu_area #nav .nav-link {
padding: 23px 15px;
}
.header_area.sticky .navbar {
padding: 0;
}
.header_area.sticky. menu_area nav ul li > a {
color: #fff;
.header_area {
left: 0;
position: absolute;
width: 100%;
z-index: 99;
top: 0;
padding: 0 4%;
}
.menu_area .navbar-brand {
font-size: 72px;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1;
padding: 0;
}
.menu_area .navbar-brand:hover,
.menu_area .navbar-brand:focus {
color: #fff;
}
.menu_area {
position: relative;
z-index: 2;
}
.menu_area #nav .nav-link {
color: #fff;
display: block;
font-size: 16px;
font-weight: 500;
border-radius: 30px;
-webkit-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
padding: 35px 15px;
}
.menu_area nav ul li > a:hover {
color: #fb397d;
}
<ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;">
<li class="nav-item active"><a class="nav-link" href="#home" style="color: #414141; opacity: 1;">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" style="color: #414141; opacity: 1;">About</a></li>
<li class="nav-item"><a class="nav-link" href="#features" style="color: #414141; opacity: 1;">choose us</a></li>
<li class="nav-item"><a class="nav-link" href="#application" style="color: #414141; opacity: 1;">Application</a></li>
<li class="nav-item"><a class="nav-link" href="#team" style="color: #414141; opacity: 1;">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#support" style="color: #414141; opacity: 1;">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" style="color: #414141;">Contact</a></li>
</ul>