Градиент поверх изображения?

Question

[rudaki29rus]

Доброго времени суток. Уважаемые форумчане, помогите с решением проблемы: в хедере необходимо сделать фон картинкой, а поверх него наложить полупрозрачный градиент. Нашел следующее решение:

<div id="mask"></div>
#mask {
background: url(demo.png) no-repeat 0 0 transparent;
height: 37px;
overflow: hidden;
position: relative;
width: 95px;
}

#mask::after {
background: transparent;
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Для его реализации приходится в хедер прописывать див. Если прописывать тоже самое для хедера - не работает. Если оставить все как есть, то не вижу возможности поместить на хедер навигацию, логотип и т.д.
Если в разметке сделать следующим образом:

<header>
<div class="bg_header"></div>
<nav>
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
<li><a href="#">Пункт4</a></li>
<li><a href="#">Пункт5</a></li>
</ul>
</nav>
</header>

То соответственно нав находится под дивом, что не совсем приемлимо. Как реализовать данную задачу?

Вот такой вариант не работает:

<header>
<nav>
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
<li><a href="#">Пункт4</a></li>
<li><a href="#">Пункт5</a></li>
</ul>
</nav>
</header>

header {
background: url(demo.png) no-repeat 0 0 transparent;
height: 37px;
overflow: hidden;
position: relative;
width: 95px;
}

header::after {
background: transparent;
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Comments

[Родион Смоляков]

z-index

[rudaki29rus]

Rodion Smolyakov: А можно подробнее?

Answer 1

[Виталий Сазанов]

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

<header>
  <div class="bg_header">
    <nav>
      <ul>
         <li><a href="#">Пункт1</a></li>
         <li><a href="#">Пункт2</a></li>
         <li><a href="#">Пункт3</a></li>
         <li><a href="#">Пункт4</a></li>
         <li><a href="#">Пункт5</a></li>
       </ul>
     </nav>
  </div>
</header>

header - задаете бэкграунд картинкой
.bg_header - задаете бэкграунд градиент и не забываете указать ему высоту во весь хедер.
nav - остается поверх и картинки и бэкграунда.

Вот как-то так: codepen.io/anon/pen/bwNmvr

Comments

[Виталий Сазанов]

И забыл самое главное. Этот трюк нужен если у вас не градиент, а просто прозрачный цвет сверху накладывается.
Если же градиент, то браузер рендерит его как картинку, поэтому можно для background просто указать два свойства через запятую. Лишний div вообще не нужен.

Пример: codepen.io/anon/pen/bwNmKr

[rudaki29rus]

Виталий Сазанов: Спасибо!)