フィルタを使用した背景画像の再利用

Question

私のプロジェクトでは、2つの異なるスプラッシュ画面の背景テクスチャとして2つのJPGを使用しています。画像は同じですが、反転した色です。私は、2番目の画像（反転色）を排除して同じ結果を得るためにfilterを使用する方法があるかどうかを知りたいと思います。

問題は、スタイル/構造のコンテンツを適用する方法がわからないため、フィルタを背景イメージだけに制限できます。

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); 
} 

：それはあるので、全体の要素（テキスト、ボーダー）は、設計の残りの部分と衝突フィルタによって影響を受けます

バックグラウンド画像のみが影響を受けるようにフィルタを制限するにはどうしたらいいですか？今までは、影響を受けるすべての子のフィルタ値を0にリセットしましたが、これはちょっとした回避策のようです。

JavaScriptソリューションは高く評価されていますが、jQueryやその他のライブラリは最高でも副次的なソリューションです。私が心配しているブラウザはChrome/Firefoxだけです。

Answer 1

これには::beforeまたは::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>