Наложение цвета на background-image

309
16 августа 2018, 11:40

у меня есть header, как наложить цвет именно на картинку в фоне?

header{ 
   width:100%; 
   height:100vh; 
   background: url("../img/png/header_left_lines.png") no-repeat left bottom -28px , radial-gradient(ellipse at center, rgba(62,80,141,1) 0%,rgba(24,32,59,1) 88%,rgba(24,32,59,1) 88%); 
}
<header class="header"></header>

Answer 1

Надо просто указать вторым фоном после запятой

если что то не ясно : https://jsfiddle.net/a2bk4yjh/3/

* { 
  margin: 0; 
} 
 
.item { 
  width: 300px; 
  height: 300px; 
  background: url(http://4.bp.blogspot.com/-eN2cEGCr2FI/UQg-KzEzdMI/AAAAAAAABLE/s2fZGiCozuU/s1600/XLR+to+RCA+Diagram.png), rgba(31, 40, 71, .8); 
}
<div class="item"></div>

READ ALSO
Стрелка при наведении
CSS

Стрелка при наведении

Здравствуйте? Каким методом реализуется подобное? При наведении должна появляться стрелка в виде треугольника как на скриншоте?

 374
z-index, убрать блоки под родителя
CSS

z-index, убрать блоки под родителя

как убрать блоки линий за серый фон снизу, если этот фон для них родитель, а блоки с отрицательным margin? Пробовал z-index, не получаетсяТ

 245
Вызов метода подменой контекста
javascript

Вызов метода подменой контекста

Если я хочу вызвать функцию из прототипа массивов, например forEach, для коллекции, допустим NodeList, то какой вариант лучше избрать?

 219
Доступность инпута типа чекбокс
javascript

Доступность инпута типа чекбокс

На форме есть несколько инпутов типа чекбоксПеремещаться ТАБом по элементам формы я могу

 240