Zwei Möglichkeiten, dem Hintergrundbild mithilfe der Hintergrundfarbe über CSS einen Maskeneffekt hinzuzufügen

Wenn ein Div gleichzeitig Hintergrundfarbe und Hintergrundbild festlegt, liegt die Farbe unterhalb der Bildebene und der Maskierungseffekt kann nicht erzielt werden. Daher müssen Sie ein weiteres Div als untergeordnetes Div erstellen und dann die Hintergrundfarbe des untergeordneten Div festlegen. Es gibt zwei Methoden:

Der erste Code lautet wie folgt:

CSS:

.wickeln{
    Position: relativ;
    Hintergrund: URL (i/pic4.jpg) keine Wiederholung;
    -webkit-Hintergrundgröße: 100 %;
    Hintergrundgröße: 100 %;
}
.warp-maske{
    Höhe: 100 %;
    Breite: 100 %;
    Hintergrund: rgba(0,0,0,.4);
}

html:

<div Klasse="wrap">
    <div Klasse="Wrap-Maske"></div>
</div>

Die zweite Methode besteht darin, es über das Pseudoelement after festzulegen. Der Code lautet wie folgt:

CSS:

.wickeln{
    Position: relativ;
    Hintergrund: URL (i/pic4.jpg) keine Wiederholung;
    -webkit-Hintergrundgröße: 100 %;
    Hintergrundgröße: 100 %;
}
.wrap-mask:nach{
    Position: absolut;
    oben: 0;
    links: 0;
    Inhalt: "";
    Hintergrundfarbe: gelb;
    Deckkraft: 0,2;
    Z-Index: 1;
    Breite: 100 %;
    Höhe: 100%;
}

html:

<div Klasse="wrap">
    <div Klasse="Wrap-Maske"></div>
</div>

Zusammenfassen

Oben habe ich Ihnen erklärt, wie Sie mithilfe von CSS Hintergrundfarben verwenden können, um dem Hintergrundbild einen Maskeneffekt hinzuzufügen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!