Как поставить прозрачный слой для background-image?

Question

[maestro07]

<header class="header">
		<div class="container">
			<div class="logo">
				<a href="#">Lucid</a>
				<p>one page <br>theme</p>
			</div>
			<div class="top_menu">
				
			</div>
		</div>
	</header>

.header {
	background-image: url(../img/top_bg.jpg);
	min-height: 620px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.header::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #16151b;
	opacity: .85
}
.logo {
	padding-top: 40px;
	text-transform: uppercase;
	font-size: 24px;
	font-family: "Quicksand-Bold", sans-serif;
}

.logo a {
	display: inline-block;
	color: #fff;
	text-decoration: none;	
}

.logo p {
	display: inline-block;
	font-size: 9px;
	font-family: "SourceSansProRegular", sans-serif;
	color: #55555a;
}

слой перекрывает все, из за этого не видны цвета ссылок и р

Answer 1

[Ankhena]

https://jsfiddle.net/fz3ek6xc/

.container {
  position: relative;
}