CSS HTML opacity для картинки которая background-image для nav

Nelit

Потрачен
Автор темы
252
38
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
У меня есть картинка которая служит фоном для nav
1624913400062.png

Мне надо ИМЕННО для картинки сделать opacity. В голову пришла идея поставить обвёртку на nav.​
HTML:
<div class="layer">
    <nav>
        <?php
            include('templates/header.php')
        ?>
    </nav>
</div>

PHP:
<div class="nav-bar">
    <div class="logo">
        <a href="#">
            LOGO
        </a>
    </div>
    <ul class="nav-links">
        <li><a href="https://www.home-craft.su/">Главная</a></li>
        <li><a href="donat">Привилегии</a></li>
        <li><a href="donat">Форум</a></li>
        <li><a href="https://www.wiki.home-craft.su/">Wiki</a></li>
        <li><a href="donat">Способы оплаты</a></li>
    </ul>
</div>

CSS:
/* Nav-bar */
nav {
    background-image: url(../img/bg-header-summer.png);
    opacity: .90;
    /* background-color: #ffd500; */
    padding-top: 30px;
    padding-bottom: 20px;
    line-height: 30px;
    font-family: Acrom-Bold;
}
.layer {
    width: 100%;
    z-index: 1;
    height: 100%;
}
.nav-bar {
    display: flex;
    justify-content: space-between;
    margin-left: 150px;
    margin-right: 150px;
}
.nav-links {
    display: flex;
}
.nav-links li {
    margin-right: 30px;
}
.nav-links a {
    color: white;
    font-size: 17px;
}
.logo a {
    color: white;
    font-size: 27pt;
}
Но теперь opacity затемняет и текст. Помогите​