Geek Answers Handbook

How to use mix-blend-mode, but does this affect the children?

Well, that's why I'm building a WordPress site, and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/

The problem I am facing is that I use mix-blend-mode for one of my div containers to use a "lighten" blend in the background.

It works fine, but the problem I am facing is that, unfortunately, the children inside the container (that is, the text) also inherit the blending mode, and therefore it also makes my text "blend", which is not what I want (I want the text to have no blending mode).

In any case, you can see the code that I use below:

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

I tried applying something like 'mix-blend-mode: none;' to the text, but this does not work.

I searched Google quite a bit for an answer to this, but, alas, there is not much (if anything) in this thread.

+6
source share
3 answers

I understand that you asked about this a while ago, but today I play with the same problem, and I managed to fix it.

Wrap the content inside the div #category-intro-text another div that is relative. Ultimately, you will want to add style to your css, rather than inline, as I did here.

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

Then remove the background color and blending information that you got in the stylesheet for div #category-intro-text . You must end up ...

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

Finally, use the ::before pseudo-element to add a mixed layer.

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

Hope it does. It works great for me with a multilayer.

EDIT: Here is a script postponed from the previous answer.

+7
source

I thought this worked with the isolation property, but no. I also did not really succeed in exploring the solution to this problem.

I suppose you could use this old trick: 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; }
+2
source

Why use mix-blend-mode when there is background-blend-mode (perhaps you have already tried this!) For this purpose. In fact, mix-blend-modes mixes the element on which it is applied, with everything below it. On the other hand, the background-blend-mode used on the background only mixes with the background below it.

You can do it -

 .outer-wrapper { background: url(<url>), #fb3; background-blend-mode: exclusion; padding: 2em 4em; } .inner-text { /**styling of you text***/ }
0
source

More articles:


All Articles