web-dev-qa-db-fra.com

Appliquer l'opacité à l'image de fond mais pas au texte

Mon problème est que lorsque je rend ma photo plus sombre, le texte de la classe .text devient également plus sombre et je ne sais pas comment éviter cela.

Je connais une solution: faire .wrapposition:absolute et la classe .text ne pas créer dans image mais cette solution ne me convient pas (comme this ).

D'autres idées?

C'est le code que j'ai:

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  opacity: 0.8;
  height: 100vh;
  max-height: 350px;
  min-height: 200px;
}
.text {
  color: #FFF;
  font-weight: 900;
}
<div class="wrap">
  <div class="image">
    <div class="text">
      <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
        YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU</p>
    </div>
  </div>
</div>

jsfiddle demo

htmlcssopacity
6
Qwe

opacity n'est pas une propriété inherit mais affecte le contenu. Ainsi, lorsque vous augmentez l'opacité de .image qui affecte également .text, vous pouvez utiliser des pseudo-éléments et background: rgba() pour obtenir ce que vous souhaitez:

Voici un travail JSFiddle pour jouer avec

.wrap {
    width: 100%;
}
.image {
    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");
    position: relative;
    height: 100vh;
}
.image:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}
.text {
    color: #FFF;
    position: relative;
}
<div class="wrap">
    <div class="image">
        <div class="text">
            <p>I LOVE YOU</p>
        </div>
    </div>
</div>

12
Yandy_Viera

opacity est appliqué à l'ensemble de l'élément (y compris le contenu).

Par conséquent, étant donné que div.text est imbriqué dans div.image, la variable opacity appliquée à div.image s'applique également à tous les descendants. 

Avec les couleurs d'arrière-plan, vous pouvez appliquer l'opacité directement à la propriété avec rgba():

background-color: rgba(255, 0, 0, 0.6);

... et le problème soulevé dans votre question est évité.

Cependant, avec les images d'arrière-plan, une solution de contournement est nécessaire.

Les options incluent la création d'une variable div distincte pour l'image ou l'utilisation d'un pseudo-élément.

Ces options et quelques autres sont détaillées ici:

4
Michael_B

vous pouvez toujours appliquer des filtres Webkit pour rendre le texte plus lumineux

http://jsfiddle.net/RachGal/qxtwckts/ ou l'extrait suivant http://jsfiddle.net/RachGal/qxtwckts/1/

#wrap {
  position: relative;
  float: left;
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  height: 400px;
  width: 400px;
}
#wrap:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
}
p {
  font-size: 1em;
  color: white;
  text-align: left;
}
}
<div id="wrap">




  <div id="text">
    <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
      YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU
      <p>
  </div>


</div>

1
Rachel Gallen