4

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:

Esto es como 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

3 respuestas 3

4

El problema es que cuando le das opacity a un elemento todo su contenido tendrá como minimo esa opacidad, puede tener más pero nunca menos.

Puedes usar un el pseudoelemento ::after o ::before y poner ahí la imagen y la opacidad que necesites:

.bg-primary {
  background-color: #3A6324;
  z-index: -2;
  position: relative;
}

.barnner1 {
  position: relative;
}

.barnner1::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://lorempixel.com/400/200/sports/1/");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
}
<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>

ACTUALIZACIÓN

He editado mi respuesta para poner la imagen debajo del texto pero encima del color de fondo como sugiere @aldanux.

Los elementos con position:static (la posición por defecto) no aceptan la propieda z-index por lo que para que el div.bg-primary quede por debajo de .barnner1::after le he añadido tambien position:relative

3

Las respuestas dadas no me convencen ya que la imagen esta sobre el texto... aquí te dejo un ejemplo estando la imagen detrás del texto:

div {
    position: relative;
    font-weight: bold;    
}

div:before {
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: url("http://lorempixel.com/output/people-q-c-640-480-9.jpg") center no-repeat;
    opacity: .5;
    position: absolute; 
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1; /* Ponemos debajo del text */
}

div:after {
   display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(71, 122, 52, .4);
    position: absolute; 
    top: 0;
    z-index: -2;  /* Ponemos debajo del imagen y text */
}
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>

Edit: Con tu ejemplo dado sería algo parecido a esto:

.bg-primary {
    position: relative;
    font-weight: bold;    
}

.bg-primary:before {
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: url("http://lorempixel.com/output/people-q-c-640-480-9.jpg") center no-repeat;
    opacity: .5;
    position: absolute; 
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1; /* Ponemos debajo del text */
}

.bg-primary:after {
   display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(71, 122, 52, .4);
    position: absolute; 
    top: 0;
    z-index: -2;  /* Ponemos debajo del imagen y text */
}
<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>

4
  • Bien visto eso. Aunque en el ejemplo del OP hay que tener en cuenta que tambien tiene luego un color de fondo en otro div, con z-index:-1 la imagen quedaría debajo, habría que ajustar ahí el z-index también.
    – user7176
    Commented el 28 jul. 2017 a las 10:26
  • @blonfu - Correcto.. hay que ajustar el z-index... respuesta actualizado Commented el 28 jul. 2017 a las 10:38
  • El problema que veo en tu publicación es que utilizas la etiqueta div y en mi caso si pongo lo que me sugieres se cambia todo. Que etiqueta debería poner, teniendo en cuenta que en el css inicial estaba puesto barnner1?
    – CMorillo
    Commented el 28 jul. 2017 a las 10:47
  • @CMorillo - Mira la edición nueva... saludos Commented el 28 jul. 2017 a las 10:53
1

Te ofrezco una posibilidad alternativa: en lugar de poner el color de fondo sólido, y luego la imagen traslúcida encima, podés poner la imagen de fondo sólida, y una sombra traslúcida encima. Algo como el siguiente ejemplo. Esto tiene la ventaja de ser menos código (una sola línea) que otros métodos, pero el efecto no queda exactamente igual.

#container {
  width:600px;
  height:400px;
  background:url(http://lorempixel.com/600/400/);
  box-shadow:inset 0 0 0 10000px rgba(0,100,0,0.9);
  color:white;
}
<div id="container">
  Hola, este es el contenido, que no se ve afectado por el box-shadow.
</div>

2
  • Me ha funcionado bien, el unico problema es que no se porque se me descentra: .container1 { width:600px; height:400px; background:url(http://lorempixel.com/600/400/); box-shadow:inset 0 0 0 10000px rgba(0,100,0,0.9); color:white; }
    – CMorillo
    Commented el 3 ago. 2017 a las 7:34
  • he tenido que poner la etiqueta .container1 ya que si pongo #container1 no me lo cojo del css. Un saludo
    – CMorillo
    Commented el 3 ago. 2017 a las 7:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.