Haben hellen Text über ein dunkles Bild

Question

Ich habe die folgende CSS-Komponente:

<div className="dimmed-image" style={itemStyle}> 
    <div className="bright-text"> 
     <br/> 
     <h2 className="white-center">Some text</h2> 
    </div> 
</div> 

Die itemStyle Variablenreferenzen ein Hintergrundbild.

var itemStyle = { 
    backgroundImage: 'url(' + imageLocation + ')' 
}; 

Die css Klassen sind diese:

.dimmed-image { 
    -webkit-filter: brightness(60%); 
} 

.bright-text { 
    -webkit-filter: brightness(100%) !important; 
} 

I weißer Text auf ein Bild haben wollen, die abgedunkelt.

Wenn ich jedoch den obigen Code verwende, wird der Text auch verdunkelt.

Wenn ich zwei separate div Klassen wie diese machen:

<div className="dimmed-image" style={itemStyle}> 
</div> 
<div className="bright-text"> 
    <br/> 
    <h2 className="white-center">Some text</h2> 
</div> 

Dann wird der Text unter dem Bild platziert werden.

Wie kann ich hellen Text auf einem dunklen Bild haben?

Answer 1

Um den Text Sprung zurück an die Spitze des Bildes machen nur anwenden position: absolute auf die .dimmed-image:

.dimmed-image { 
    ... 
    position: absolute; 
} 

Das das Bild außerhalb des normalen Rendering nehmen und solange Sie nicht angeben andere Lage wird es am selben Ort bleiben. Währenddessen werden die Elemente darunter (z. B. der Text) das Bild ignorieren und gerendert werden, beginnend mit dem gleichen Punkt, an dem das Bild beginnt.

Answer 2

Platzieren Sie das abgeblendete Bild und den Text in separaten divs und wickeln Sie sie in einem Container div zusammen.

Geben Sie dem Container div die gleiche Breite und Höhe wie dem Bild, das das Bild enthält. Machen Sie das Gleiche auch mit dem bright-text div. Verwenden Sie position, um Ihren Text über dem Bild zu platzieren.

Das ist der beste Ansatz.

Auch className ist ungültig. Verwenden Sie stattdessen class.

HTML:

<div class="dimmed-image-wrapper"> 
    <div class="dimmed-image" style={itemStyle}> 
    </div> 
    <div class="bright-text"> 
    <br/> 
    <h2 class="white-center">Some text</h2> 
    </div> 
</div> 

CSS

.dimmed-image { 
    -webkit-filter: brightness(60%); 
} 

.dimmed-image-wrapper { 
    position: relative; 
    width: [same-as-dimmed-image]px; 
    height: [same-as-dimmed-image]px; 
} 

.bright-text { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: [same-as-dimmed-image]px; 
    height: [same-as-dimmed-image]px; 
} 

Im Inneren des .bright-text div Sie auch position, left und top CSS-Regeln verwenden können, um den Text zu bewegen, wenn Sie es wünschen.