So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu

<div Klasse="wrap1">
     <div Klasse="inner"> </div>
</div>
.wrap1 {
    Position: relativ;
    Breite: 1200px;
    Höhe: 400px;
    Hintergrund: rgba(0, 0, 0, .5);
}

.wrap1 .inner {
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: 0;
    unten: 0;
    Hintergrund: URL (ban8.jpg) keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
    z-Index: -1;
}

<div Klasse="wrap2"></div>
.wrap2 {
    Position: relativ;
    Breite: 1200px;
    Höhe: 400px;
    Hintergrund: URL (ban8.jpg) keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
}

.wrap2::vor {
    Inhalt: "";
    Position: absolut;
    links: 0;
    rechts: 0;
    unten: 0;
    oben: 0;
    Hintergrundfarbe: rgba(0, 0, 0, .5);
    Z-Index: 2;
}

<div Klasse="wrap3"></div>
.wrap3 {
    Position: relativ;
    Breite: 1200px;
    Höhe: 400px;
    Hintergrund: URL (ban8.jpg) rgba (0, 0, 0, .5) keine Wiederholung Mitte Mitte;
    Hintergrund-Mischmodus: Multiplizieren;
}

.wrap4 {
    Position: relativ;
    Breite: 1200px;
    Höhe: 400px;
    Hintergrund: URL (ban8.jpg) rgba (0, 0, 0, .5) keine Wiederholung Mitte Mitte;
    Hintergrund-Mischmodus: Multiplizieren;
    Filter: Unschärfe (2px);
    Überlauf: versteckt;
}