Estoy desarrollando una página web donde quiero meter una imagen de fondo con una opacidad de 0.3 y que las letras que hay encima no sufran opacidad. Las letras estarían anidadas dentro del div de la imagen. No se como hacerlo o si se puede, que me recomiendan?
Asi se ve la web:
Aquí tendriamos el codigo html:
<section class="bg-primary" id="nosotros">
<div class="barnner1" id="nosotros1">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
<hr class="light">
<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
</div>
</div>
</div>
</div>
</section>
Esto sería barnner (donde pongo la imagen):
.barnner1{
background-image: url("logogris.png");
background-repeat: no-repeat;
background-position: center;
opacity: 0.3
}
Y por ultimo tenemos bg.primary donde se le indica el color de fondo:
.bgprimary { background-color: #3A6324; }
Gracias por su ayuda