Как добавить градиентную заливку на странице, чтобы не перекрывались элементы?

Question

[Никита Сальников]

Здравствуйте. в макете Figma есть градиентная заливка навигационной панели.

.nav{
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) -41.9%, rgba(255, 255, 255, 0.4) 260.24%);
    backdrop-filter: blur(200px);
    opacity: 0.1;
}

Все бы ничего но эта заливка перекрывает содержимые элементы контейнера, в итоге логотип и прочие элементы не видно. если убрать opacity, то элементы видно, но цвет бэкграунда становится какой то серый.
надо так:


а получается так


и так если отключить opacity

<header class="header">
        <nav class="nav">
            <div class="container">
                <div class="header__nav">
                    <div class="logo">
                        <a href="#">
                            <img src="image/logo.png" alt="Logo">
                            <h3 class="logo__title">Artificial Intelligence</h3>
                        </a>
                    </div>
                    <ul class="nav__list">
                        <li>
                            <a href="#" class="nav__link">Home</a>
                        </li>
                        <li>
                            <a href="#" class="nav__link">About</a>
                        </li>
                        <li>
                            <a href="#" class="nav__link">Services</a>
                        </li>
                        <li>
                            <a href="#" class="nav__link">Blog</a>
                        </li>
                        <li>
                            <a href="#" class="nav__link">Contact</a>
                        </li>
                    </ul>
                    <div class="nav__btn">
                        <button type="submit">Sign In</button>
                    </div>
                </div>
            </div>
        </nav>
    </header>

Answer 1

[michaelvovk]

ты задаёшь opacity для всего блока .nav, в итоге у тебя весь блок принимает opacity 0.1, то есть становится прозрачным.