0

Existe alguma maneira de escurecer uma imagem background sem afetar o texto que está sobre ela?

.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>

Neste caso, o parágrafo e a imagem ficam opacas, preciso que apenas a imagem fique, para que o texto fique nítido.

1 Resposta 1

4

Você pode usar um pseudo-elemento :after ou :before e utilizá-lo como uma camada a frente do background e atrás do texto. Pra isso você precisa colocar um position:relative na div principal e utilizar z-index para definir qual elemento ficará a frente.

Segue um fiddle de exemplo.

1
  • Obrigada @Mauro era exatamente o que precisava.
    – scooby
    15/04/2016 às 13:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .