Как использовать режим mix-blend-mode, но не влияет ли это на дочерние элементы?

Question

Итак, я строй сайта WordPress и на странице в вопросе можно увидеть здесь: http://test.pr-tech.com/power-line-markers/

Проблема, которую я имею в том, что я использую микс-Blend-режим для одного из моих Div контейнеров, чтобы сделать используйте «светлую» смесь на фоне.

Он работает отлично, но проблема, с которой я сталкиваюсь, заключается в том, что, к сожалению, дочерние элементы внутри контейнера (то есть текст) также наследуют режим наложения, и поэтому он также делает мой текст «blend», t, что я хочу (я хочу, чтобы в тексте не было режима смешивания).

В любом случае, вы можете увидеть код, я использую ниже:

#category-intro-text { 
    padding: 0.625em 0.938em; 
    mix-blend-mode: lighten; 
    background-color: rgba(220, 235, 255, 0.8); repeat; 
} 

Я пытался применять что-то вроде «микс-совмещенного режима: нет;» к тексту, но это не работает.

Я искал Google для ответа на это довольно широко, но, увы, в этой теме мало (вообще-то).

Answer 1

Я думал, что это сработало с недвижимостью isolation, но нет. У меня не было большой удачи, исследуя решение этой проблемы.

Я полагаю, вы могли бы использовать этот старый трюк: http://jsfiddle.net/cwdtqma7/

HTML:

<div class="intro-wrap"> 
    <div class="intro-background"></div> 
    <div class="intro-content"> 
     <h1>Hello</h1> 
     <p>Welcome to the thing.</p> 
    </div> 
</div> 

CSS:

body { 
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat; 
    background-size: 800px; 
    font-family: sans-serif; 
} 
.intro-wrap { 
    position: relative; 
} 
.intro-background { 
    background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png'); 
    mix-blend-mode: lighten; 
    padding: 32px; 
    width: 300px; 
    height: 300px; 
} 
.intro-content { 
    position: absolute; 
    top: 0; 
    left: 32px; 
} 

Answer 2

Я понимаю, что вы спрашивали об этом некоторое время назад, но я играл с той же проблемой сегодня и удалось это исправить.

Оберните содержимое внутри #category-intro-text div с другим div, который расположен относительно. В конечном счете, вы захотите добавить стиль к вашему css, а не встроенный, как я сделал здесь.

<div id="category-intro-text"> 
    <div style="position: relative;"> 
     <h1>Power Line Markers</h1> 
     Etc. Etc. 
    </div> 
</div> 

Затем удалить цвет фона и смешивания информацию вы получили в таблице стилей для #category-intro-text дел. Вы должны закончить с ...

#category-intro-text { 
    padding: 0.625em 0.938em; 
    position: relative; 
} 

Наконец, используйте ::before псевдо элемент, чтобы добавить смешанный слой.

#category-intro-text::before { 
    content: ""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(220, 235, 255,0.8); 
    mix-blend-mode: lighten; 
} 

Надеюсь, что это будет сделано. Он отлично работает для меня с многослойным слоем.

EDIT: Here is a Fiddle forked из предыдущего ответа.

Answer 3

Почему микс-Blend-режим, когда есть фон-смесь-режим (может быть, вы уже пробовали это!) Для этой цели. На самом деле mix-blend-modes смешивает элемент, на который он применяется, со всем под ним. С другой стороны, background-blend-mode, применяемый на фоне, смешивается только с фоном, находящимся под ним.

Вы можете сделать this-

.outer-wrapper { 
background: url(<url>), #fb3; 
background-blend-mode: exclusion; 
padding: 2em 4em; 
} 

.inner-text { 
/**styling of you text***/ 
}