Darken background with text on image

Question

Is there any way to darken a background image without affecting the text that is on it?

.slider-principal{
	content:'\A';
    top:0; left:0;
    opacity: 0.8;

}

.slider-principal p{
	color: #fff;
	bottom: 0;  
  	left: 10px;
  	color: #fff;
  	font-family: "Myriad Pro";
  	z-index: 10;
}

<div style=" background-image: url('/upload/exemplo.jpeg; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;" class="slider-principal"  >
   <p>Titulo</p>
   <p>Descrição da Imagem</p>
</div>

In this case, the paragraph and the image are opaque, I need only the image to be, so that the text is clear.

Answer 1

You can use a pseudo-element :after or :before and use it as a layer in front of the background and behind the text. For that you need to put one position:relative in div main and use z-index to define which element will be the front.

Follow an example fiddle.