Mix Blend Mode Conundrum

Continuing the discussion from How to create this Layered effect in CSS:

First, thanks to @PaulOB for making me aware of the existence of this. It was one of those things where I thought “wouldn’t it be good if css had…” and it turns out it does.
So I had to go try it out; and it turns out to be not quite so useful as I hoped. I was thinking it would be great for background effects of containers. But the thing is, css being Css, the properties of the container are inherited by its contents, so everything in that container gets the blend mode. so for example, you have a container with a nice transparent filtery effect in the background and you want fully opaque text on top of it, you can’t, or at least not easily.
What I would like to see is a way to confine the blend effect to only the background property of the element. Is that possible?
I did think of some workarounds (dirty hacks) for this and tried them out, but none worked perfectly.
In the following pen there are three boxes. The first one is just a standard content in the box with a filter effect and shows the effect being inherited by the contents, which is fine if you want that effect.
But if you want opaque text in your filter box??
Well make the text not a child of the filter container. So in the second example there is a common parent wrapper, then the filter box which is absolutely positioned to fill the parent, then another sibling container for the text.
The problem here is, so it seems, when the filter element is placed absolutely, it will then appear on top of any element that is placed relatively, regardless of the order of flow and z-index. So my opaque text is behind the filter.
OK, for the third attempt, if the filter being absolute is a problem, make the text be absolute instead. That does put the opaque text on top of the filter as desired, but the problem is, I can no longer make the filter fill the parent with height:100%, not unless I set the height of the parent container, as explained by Ryan here. So unless you are someone who still thinks it’s 2004 and are using fixed heights for all your containers, that is not an entirely usable option in many cases.
So, any more ideas anyone?

Did you mean like this?

1 Like

Full marks. That’s exactly it and it doesn’t need the fake sibling container.
One thing I don’t understand. When I made the filter element absolute, it seems to go over the top of all relative elements. But in yours the filter is absolute, but obeys the z-index. Is that because you used the :after pseudo element and not a real element?

It shouldn’t make any difference as long as its layered correctly.

I think you just forgot to add position:relative and a z-index to .container in your second example.

You’re right, adding position: relative to the .container class fixes it. Not sure how that slipped through. Admittedly the css in the original pen was a jumbled mess, the result of trying everything in an attempt to make it work.
But I like your method better because the content is in its container, I don’t need the extra dummy/sibling container for the filter.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.