My website contains some semi-transparent-black articles.showcase above a body with a background. (the .showcase are not the direct children of the body) The background-image under the .showcase is darkened by it's semi-transparent-black. Now I want to create a h2.showcase_title in each respective .showcase as a knockout text, which shows the background-image of the body unaffected, by the .showcase background-color. The knockout or blending effect should not effect other content of the .showcase (not it's .thumbnail nor .tags)

It should look like the .showcase is a semi-transparent layer on top of the background-image and the letters of the .showcase_title are cut out of the .showcase, showing the background-image below.

I tried mix-blend-mode with screen and multiply both on the .showcase and on .showcase_title but it didn't have any blending effect at all. (Doesn't have anything to do with my browser, worked with other examples. Using chrome).

It might have something to do with the stacking context? Maybe because of the background-image is position:fixed it is not considered by the blending mode? I know nearly nothing of the stacking context of css and have not found a helpful tutorial for it. Maybe someone could privide me with a link to some?

I don't need to solve this with mix-blend-mode, but I want to create this effect programmatically, not with photoshop-prepared pictures and I would rather avoid svg.

Thanks a lot, it works! I had to duplicate the background-size: cover; background-position: center; used for the <body> on the .showcase_title to make the backgrounds overlay exactly.The current state of the website below as .png, just if some are interested. (Still a lot to do regardings it's design, but the knockout-text works)

One question: The positioning of the .showcase_title background fits when I use background-size: cover; background-position: center; as for the body - but I don't understand why. If I use background-size: cover; background-position: center; on the .showcase_title I would expect it's background-image to scale and position relative to this element - thus scaling it much smaller and centered relative to the .showcase_title, not fitting to the body background-image. Obviously I still don't get css ^^

Thanks a lot, it works! I had to duplicate the background-size: cover; background-position: center; used for the <body> on the .showcase_title to make the backgrounds overlay exactly....One question: The positioning of the .showcase_title background fits when I use background-size: cover; background-position: center; as for the body - but I don't understand why.

Does it really fit? Note that the duplicated background-image is only shown through the letters, the background behind the semi-black area is the same image as for BODY.

QUOTE

If I use background-size: cover; background-position: center; on the .showcase_title I would expect it's background-image to scale and position relative to this element - thus scaling it much smaller and centered relative to the .showcase_title, not fitting to the body background-image.