webentwicklung-frage-antwort-db.com.de

Wenden Sie die Deckkraft auf das Hintergrundbild an, jedoch nicht auf Text

Mein Problem ist, wenn ich mein Bild dunkler mache, wird auch der Text in der Klasse .text dunkler, und ich weiß nicht, wie ich das vermeiden kann.

Ich kenne eine Lösung: .wrapposition:absolute und Klasse .text nicht in image machen, aber diese Lösung ist für mich ungeeignet (wie this ).

Irgendwelche anderen Ideen?

Dies ist der Code, den ich habe:

.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 ist keine inherit-Eigenschaft, wirkt sich jedoch auf den Inhalt aus. Wenn Sie also die Opazität von .image erhöhen, die sich auch auf .text auswirkt, können Sie Pseudo-Elemente und background: rgba() verwenden, um das zu erreichen, was Sie möchten:

Hier ein funktionierendes JSFiddle zum Spielen

.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 wird auf das gesamte Element (einschließlich des Inhalts) angewendet.

Da div.text in div.image verschachtelt ist, gilt die auf div.image angewendete opacity auch für alle Nachkommen. 

Mit Hintergrundfarben können Sie die Deckkraft mit rgba() direkt auf die Eigenschaft anwenden:

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

... und das in Ihrer Frage aufgeworfene Problem wird vermieden.

Bei Hintergrundbildern ist jedoch eine Problemumgehung erforderlich.

Zu den Optionen gehören das Erstellen einer separaten div für das Bild oder die Verwendung eines Pseudoelements.

Diese Optionen und einige andere werden hier detailliert beschrieben:

4
Michael_B

sie können immer Webkit-Filter anwenden, um den Text heller zu machen

http://jsfiddle.net/RachGal/qxtwckts/ oder der folgende Ausschnitt 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