Hintergrundbild mit Filter wiederverwenden

Question

Mein Projekt verwendet zwei JPGs als Hintergrundtexturen für zwei verschiedene Splashscreens. Die Bilder sind identisch, aber mit invertierten Farben. Ich möchte wissen, ob es eine Möglichkeit gibt, das zweite Bild (invertierte Farben) zu eliminieren und filter zu verwenden, um das gleiche Ergebnis zu erzielen.

Problem ist, ich bin mir nicht sicher, wie man Stile/Strukturinhalt anwendet, also kann ich den Filter auf nur das Hintergrundbild begrenzen. Wie es ist, wird das gesamte Element (Text, Grenzen) von dem Filter beeinflusst, die mit dem Rest des Designs kollidiert:

HTML

<header class="header"> 
    <div class="splash splash-one">Page Title</div> 
    <div class="splash splash-two"> 
     <div>thing 1</div> 
     <div>thing 2</div> 
    </div> 
</header> 

CSS

.splash-two { 
    filter: invert(0.7); 
    -webkit-filter: invert(0.7); 
} 

Wie kann ich den Filter so beschränken, dass nur das Hintergrundbild betroffen ist und nur wenn es das zweite Mal verwendet wird? Bis jetzt habe ich den Filterwert für alle betroffenen Kinder auf 0 zurückgesetzt, aber das scheint wie ein klobiger Workaround.

JavaScript-Lösungen werden geschätzt, aber jQuery und andere Bibliotheken sind bestenfalls eine sekundäre Lösung. Chrome/Firefox sind die einzigen Browser, die mich interessieren.

Answer 1

können Sie dafür ein Pseudo-Element verwenden, entweder ::before oder ::after.

body { 
 
    margin: 0 
 
} 
 
[class*="splash"] { 
 
    height: 50px; 
 
    width: 100% 
 
} 
 
.splash-one { 
 
    background: url("http://lorempixel.com/1600/900") no-repeat 
 
} 
 
.splash-two::before { 
 
    filter: invert(.7); 
 
    -webkit-filter: invert(.7); 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    top: 50px; 
 
    left: 0; 
 
    background: url("http://lorempixel.com/1600/900") no-repeat; 
 
    z-index:-1 
 
}

<header class="header"> 
 
    <div class="splash splash-one">Page Title</div> 
 
    <div class="splash splash-two"> 
 
    <div>thing 1</div> 
 
    <div>thing 2</div> 
 
    </div> 
 
</header>