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
using a channel as an alpha mask - the bottom row lets us choose which input channel is used for the output alpha; if we set one of the RGB channels (first 3 values) to 1 and zero all else on the last row, that channel is used as the alpha mask.
Here is the interactive demo illustrating this on @codepen
https://codepen.io/thebabydino/full/OJqZvQO
@anatudor@mastodon.social solid fill - first three values on the last column are set to the desired RGB values (decimal representation of percentage RGB)
Interactive demo on @codepen
https://codepen.io/thebabydino/full/LYamwrz
![Screenshot of the demo, with the feColorMatrix primitive using the values from an input[type=color] (which are also displayed in the hex. RGB and percentage RGB formats), a button to copy the SVG filter to clipboard, a visual test area and options to select what the filter gets applied on (text + emojis or a CSS gradient or a .png with transparency or a fully opaque .jpg).](https://files.mastodon.social/media_attachments/files/114/082/075/316/816/316/original/a038645e7ccc181e.png)