0

I have a navigation bar with a gradient background, a <nav> with a list of links.

When a user is on a certain page, I style the link and list item corresponding to that page differently. What I can't figure out, however, is how to make the text transparent in such a way that it looks exactly like a cutout into the <nav> gradient—so that the background of the parent <li> is clear over the text).

I know from answers like this that the protocol is to specify

background: url("image");
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

and position the image accordingly so it appears to line up with the background.

How can I adjust the link's gradient so it appears to be in line with the <nav>'s? Alternatively, is it possible to make the text transparent without specifying a background? 

nav { 
  background:linear-gradient(to left, black, red, white);
  height: 100px;
  vertical-align: center;
  maring: 0; 
  line-height: 100px;
  font-size: 20px;
}

li {
  display: inline;
  padding: 20px;
}

li.selected { 
  background-color: white; 
}

li.selected a {
  background: linear-gradient(to left, black, red, white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; 
}

ul { 
  list-style: none;
}
<nav>
  <ul>
    <li><a>A</a></li>
    <li class="selected">
      <a>
        B
      </a>
    </li>
    <li><a>C</a></li>
  </ul>
</nav>
Community
  • 1
  • 1
Randoms
  • 2,110
  • 2
  • 20
  • 31
  • If your background color is solid, you can just use that as your text color. – TemporaryName Aug 04 '16 at 19:58
  • I meant behind the navigation, unless I misunderstood your question. – TemporaryName Aug 04 '16 at 20:01
  • @TemporaryName, ah—the navigation is what I'm trying to make the text look like it's a part of. Some of the styles on the `
  • ` include a `background-color` which visually separate the text from the navigation.
    • – Randoms Aug 04 '16 at 20:04
  • Now you see why S.O recommends a [**MCVE**](http://stackoverflow.com/help/mcve), thus people can understand what you're trying to say rather than make it like a guesswork – Mi-Creativity Aug 04 '16 at 20:07
  • 1
    @Mi-Creativity: Point taken. – Randoms Aug 04 '16 at 20:36
  • Yeah...this won't work...the gradients are the same **but different widths**....that's the problem. – Paulie_D Aug 04 '16 at 20:39
  • @Paulie_D, thanks for the pointer. How can I specify the width and calculate the position of a gradient? Alternatively, how can I make the text transparent without specifying a background layer? – Randoms Aug 04 '16 at 20:42
  • Pretty much...you can't....unfortunately. – Paulie_D Aug 04 '16 at 20:48