Wie verdunkle ich das Hintergrundbild in CSS?

Ich habe ein Jumbotron von bootstrap und ich möchte seinen Hintergrund verdunkeln, ohne den Text zu berühren, der darin eingegeben wird. Gibt es eine Möglichkeit, so etwas zu tun?Wie verdunkle ich das Hintergrundbild in CSS?

Ich habe überall gesucht, aber alle Lösungen, die ich gefunden habe, verdunkeln den Text auch.

Was ich habe, so weit:

.mainJumbotron { 
 
    margin: 0px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-image: url(http://i.imgur.com/qj2w73W.png); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div class="jumbotron mainJumbotron"> 
 
    <h1 style="">Hakkımızda</h1> 
 
</div>

Quelle

2016-04-03 Ege Kaan Gürkan

wir müssen Code – dippas

sehen Okay, nur eine Sekunde. –

Da gehen Sie hin. Ich habe den Code hinzugefügt. –

versuchen, etwas wie diese zu erhalten :

In Ihrem jumbotron Klasse, geben Sie ein wenig mehr CSS, indem Sie position:relative; hinzufügen, wenn es nicht schon da ist. Dadurch kann der nächste Schritt innerhalb dieser Box positioniert werden.

Fügen Sie dann ein :after Pseudoelement hinzu. mit der folgenden CSS

.jumbotron:after { 
    content:""; 
    display:block; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.5); 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1 /*Added this in the updated */ 
}

die background-color Schatten wird durch den endgültigen Wert gesteuert. 0.5 ist 50% Opazität, erhöhe auf 1 oder niedriger auf 0, um die gewünschte Dunkelheit zu erhalten.

UPDATE Was darauf hingewiesen wurde, ist, dass alles innerhalb der Box durch das neue Pseudoelement abgedeckt ist. Hier ist eine billige Lösung. In z-index:1; zu Ihrem :after alement, fügen Sie dann die folgenden

.jumbotron > * { 
    position:relative; 
    z-index:2; 
}

Dank https://jsfiddle.net/e8c3ex0h/3/

Quelle

2016-04-03 18:44:19 ntgCleaner

hat auch nicht funktioniert :( –

versuche, 'z-index: 1' oder höher zu' 'after'' hinzuzufügen, nur um zu sehen, ob es hinter – ntgCleaner

liegt Das macht nicht was du denke, dass es tut: https://jsfiddle.net/e8c3ex0h/2/ (Ich habe sowohl "vorher" als auch "nachher", das gleiche Ergebnis. –

Sie können folgende versuchen, Sie zu sehen CSS, wenn Sie das gewünschte Ergebnis

#element { 
-webkit-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
-moz-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1); 
}

Quelle

2016-04-03 18:41:30 RiaanV

Nicht ganz das, was ich will:/ –

Sie wollen also wie ein Overlay? – RiaanV

Ich möchte das Hintergrundbild etwas verdunkeln, damit der Text vorne deutlich lesbar ist. –

Dies ist cale_b, wie es geht:

body, h1 { 
 
    margin: 0; 
 
} 
 

 
.mainJumbotron { 
 
    margin: 0px; 
 
    height: 250px; 
 
    text-align: center; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
 
         url(http://i.imgur.com/qj2w73W.png); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
}

<div class="jumbotron mainJumbotron"> 
 
    <h1 style="">Hakkımızda</h1> 
 
</div>

(siehe auch this Fiddle)

Quelle

2016-04-03 18:53:31

Wie verdunkle ich das Hintergrundbild in CSS?

Antwort

Verwandte Themen