0

У меня полупрозрачный фон для 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>

2 ответа 2

4

Просто меняете в градиенте HEX на RGBA и всё:

.header_area {
  width: 100%;
  height: 100px;
  background: linear-gradient(to right, rgba(255, 8, 0, .5), rgba(128, 255, 0, .5));
}
<div class="header_area"></div>

Вот неплохой конвертер цветов для таких целей: https://colorscheme.ru/color-converter.html

5
  • @asdas, поскольку из Вашего кода невозможно точно понять, что и как выглядит (потому что html Вы один привели, а css - совершенно для другого блока), то могу посоветовать использовать цвет шрифта более контрастный или обводку сделать с помощью text-shadow 24 дек 2018 в 8:32
  • @asdas, css Вы обновили - а html? Где блок-то, который .header_area.sticky? сделайте полный пример, чтобы проблема наглядно воспроизводилась, и не надо было гадать 24 дек 2018 в 8:51
  • его нет, это он из бутстрапа берет
    – asdas
    24 дек 2018 в 8:57
  • @asdas, как это "его нет" - Вы же стили ему задаёте, тот самый градиент... 24 дек 2018 в 9:01
  • он бутстрапа берет sticky, я готовый шаблон взял и просто прописал туда градиент, в html его нет
    – asdas
    24 дек 2018 в 9:02
0

попробуйте так:

CSS:

.test {
  color: #fff;
  z-index: 2;
}
.test::after {
  background: linear-gradient(to right, rgba(255, 8, 0, .5), rgba(128, 255, 0, .5));
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
}

HTML:

<div class="test">Hello world</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.