@nikitasalnikov
Новичок

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

Здравствуйте. в макете 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, то элементы видно, но цвет бэкграунда становится какой то серый.
надо так:
60b5154230779501555922.jpeg

а получается так
60b51569ab4f7378843652.jpeg

и так если отключить opacity
60b515da60294568210222.jpeg

<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>
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 1
@michaelvovk
ты задаёшь opacity для всего блока .nav, в итоге у тебя весь блок принимает opacity 0.1, то есть становится прозрачным.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы