Darken background with text over image

Navigation
0

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 remain, so that the text is clear.

    
asked by anonymous 15.04.2016 / 15:01

1 answer

4

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 this you need to put a position:relative on the div main and use z-index to define which element will be ahead.

Here's an example fiddle.

    
15.04.2016 / 15:30
Add a value to a JSON object Socket locked when performing data exchange