Want inline semitransparent text background with no overlap?
Here's how on @codepen
https://codepen.io/thebabydino/pen/gbOwxGL?editors=1100
(you can see the overlap problem and the desired result below)
The `filter` combines 2 `feColorMatrix` techniques:
using a channel as an alpha mask
solid fill
@anatudor hah, i requested something like this ages ago on the CSS WG list ... https://codepen.io/patrickhlauke/pen/jOzJwvZ
@patrick_h_lauke Wait, that's a slightly different problem and doesn't even require an SVG filter (like the semi-transparency overlap does). Here's a fork https://codepen.io/thebabydino/pen/ogNzGpw?editors=1100
@anatudor blend mode works in that case against white page background, but it's not quite a general approach for varying page backgrounds etc. just after some way of "merging" all backgrounds together as one unit there that sits behind all the text (and can then be opaque, or transparent, or whatever really). but yeah, can hack it for very specific controlled uses, sure...
@patrick_h_lauke You don't need a white page background. Refresh to see. In general, it works for any text that's super close to either white or black, regardless of the page backdrop. And with the SVG filter method I'm using in my transparency overlap demo, it can be made to work for any text/ highlight combo, like blue text + yellow highlight.