0

I'm trying to create a layout in which some letters are transparent with a white background behind them, but the transparency shows all the way through to a gradient background several levels up the HTML hierarchy. Basically, I'm trying to achieve something like the following:

enter image description here

Here's my current HTML and CSS:

.header {
  background-image: linear-gradient(135deg, #2121CC, #1E0674);
}

.header>div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 100rem;
  padding: 1rem 2rem;
}

.header>div>h1 {
  display: flex;
}

.header>div>h1>span {
  background: #FFF;
  color: transparent;
  display: block;
  margin-right: 1rem;
  -webkit-text-fill-color: transparent;
}
<div class="header">
  <div>
    <h1>
      <span>A</span>
      <span>B</span>
    </h1>
  </div>
</div>

I was referencing the following CSS Tricks article on how to do this:

https://css-tricks.com/how-to-do-knockout-text/

But the issue in my case seems to be that I want the text to be transparent and show through the white background all the way to the .header element three levels up the HTML hierarchy.

Is this possible with just CSS, and if so, how? I've tried everything I can think of to no avail. Thank you.

Edit: It's worth mentioning that the CSS Tricks article uses the -webkit-background-clip: text; property, but when I add that to my CSS, it doesn't change anything and it's crossed out when you inspect the corresponding elements in the browser. In other words, I don't think it's supported and actually does anything anymore (I could be wrong).

HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • Looks like you're missing a key property from that article: [`-webkit-background-clip-text`](https://css-tricks.com/how-to-do-knockout-text/#webkit-background-clip-text) – Heretic Monkey Aug 25 '20 at 15:07
  • Good point. I added an edit to my original post to point out why I purposefully removed it. Thank you. – HartleySan Aug 25 '20 at 15:16
  • which browser are you testing in? `-webkit-background-clip: text` will only work in webkit browsers (chrome, safari, new edge). firefox (but not chrome and safari) supports the un-prefixed version (`background-clip: text`) so you'll want to add both. – Woodrow Barlow Aug 25 '20 at 15:53
  • Woodrow, thanks for noting the need to add the non-prefixed version. You're absolutely right. Unfortunately, that did not solve my problem. – HartleySan Aug 25 '20 at 17:57

1 Answers1

2

You may take a look at mix-blend-mode :

.header {
  background-image: linear-gradient(135deg, red,#2121CC, #1E0674, yellow);
}

.header>div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 100rem;
  padding: 1rem 2rem;
}

.header>div>h1 {
  display: flex;
}

.header>div>h1>span {
  background: #FFF;
  display: block;
  margin-right: 1rem;
  mix-blend-mode:screen
}
<div class="header">
  <div>
    <h1>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
      <span>A</span>
      <span>B</span>
    </h1>
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This totally worked! Thanks, G-Cyrillus. I've never even heard of this `mix-blend-mode` property before, but it seems pretty handy. Thank you! – HartleySan Aug 25 '20 at 17:58