Повторное использование фонового изображения с фильтром

Question

В моем проекте используются два JPG, как фоновые текстуры для двух разных экранов заставки. Изображения идентичны, но с инвертированными цветами. Я хочу знать, есть ли способ устранить второе изображение (инвертированные цвета) и использовать 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>