The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Knockout Text, Help for knockout heading on semi-transparent background
post Jul 17 2019, 01:38 PM
Post #1

Group: Members
Posts: 2
Joined: 17-July 19
Member No.: 26,935

Hello all smile.gif,

I'm currently failing to create a knockout text.

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.

The relevant code is this.

      <section id="portfolio">
         <article class="showcase">
            <h2 class="showcase_title">TITLE!!!</h2>
            <img class="thumbnail" src="my_image.png"/>
            <section class="tags">


body {
margin: 0;
background-image: url("my_background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.showcase {
background-color: rgba(0, 0, 0, 0.08);
.showcase_title {
color: white; /*Should be "cut" through the .showcase. White is planned as fallback for browsers which don't support mix-blend-mode*/

Thankful for any help smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 15th December 2019 - 09:03 AM