{"id":5330,"date":"2025-03-18T12:54:44","date_gmt":"2025-03-18T17:54:44","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5330"},"modified":"2025-04-04T09:01:15","modified_gmt":"2025-04-04T14:01:15","slug":"overlapping-inline-backgrounds","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/overlapping-inline-backgrounds\/","title":{"rendered":"A Deep Dive into the Inline Background Overlap Problem"},"content":{"rendered":"\n

A tweet by Lucas Bonomi<\/a> got me thinking about this problem: how to get a semitransparent background following some inline text with padding, but without the overlap problem that can be seen in the image below.<\/p>\n\n\n\n

\"Screenshot
the problem at hand: the overlapping parts appear darker because of the layered opacity<\/figcaption><\/figure>\n\n\n\n

Temani Afif<\/a> had already suggested<\/a> using an SVG filter<\/code> solution, and that was my first instinct too.<\/p>\n\n\n\n

While the initial problem has a pretty simple solution, more complex variations lead me down a deep rabbit hole and I thought the journey was worth sharing in an article.<\/p>\n\n\n\n

The initial problem and exact particular solution<\/h2>\n\n\n\n

We start with some middle-aligned text wrapped inside a p<\/code> and a span<\/code>. The span<\/code> gets padding<\/code>, border-radius<\/code>, and a semi-transparent background<\/code>.<\/p>\n\n\n

p<\/span> > span<\/span> {\n  padding<\/span>: .25em<\/span>;\n  border-radius<\/span>: 5px<\/span>;\n  background<\/span>: rgb<\/span>(0<\/span> 0<\/span> 0<\/span>\/ var(--a, .7<\/span>));\n  color<\/span>: #fff<\/span>;\n  box-decoration-break<\/span>: clone\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The result of the above code looks as follows:<\/p>\n\n\n\n
\"Screenshot
what the above CSS gives us: the overlap problem<\/em><\/figcaption><\/figure>\n\n\n\n
This is pretty much the same as the screenshot Lucas posted, so let’s see how we can fix it with an SVG filter<\/code>!<\/p>\n\n\n\n
The first step is to make the background<\/code> of the span<\/code> opaque by setting --a<\/code> to 1<\/code>. This gets rid of the overlap increasing alpha problem because there is no more transparency. To restore that transparency, we use an SVG filter<\/code>. We’ll get to that in a moment, but for now, these are the styles we add:<\/p>\n\n\n
\/* same other styles as before *\/<\/span>\np<\/span> {\n  --a<\/span>: 1<\/span>;\n  filter<\/span>: url<\/span>(#alpha)\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The SVG filter<\/code> needs to live inside an svg<\/code> element. Since this svg<\/code> element only contains our filter<\/code> and no actual SVG graphics to be displayed on the screen, it is functionally the same as a style<\/code> element, so there’s no need for it to be visible\/ take up space in the document flow.<\/p>\n\n\n
<svg<\/span> width<\/span>='0'<\/span> height<\/span>='0'<\/span> aria-hidden<\/span>='true'<\/span>><\/span>\n  <filter<\/span> id<\/span>='alpha'<\/span>><\/span>\n    <!-- filter content goes here --><\/span>\n  <\/filter<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
svg<\/span>[height='0'<\/span>]<\/span>[aria-hidden='true'<\/span>]<\/span> { position<\/span>: fixed }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
<svg<\/span> width<\/span>='0'<\/span> height<\/span>='0'<\/span> aria-hidden<\/span>='true'<\/span>><\/span>\n  <filter<\/span> id<\/span>='alpha'<\/span>><\/span>\n    <feComponentTransfer<\/span> in<\/span>='SourceAlpha'<\/span> result<\/span>='back'<\/span>><\/span>\n      <feFuncA<\/span> type<\/span>='linear'<\/span> slope<\/span>='.7'<\/span>\/><\/span>\n    <\/feComponentTransfer<\/span>><\/span>\n  <\/filter<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"Screenshot
result of the first filter step: the semitransparent black background<\/em><\/figcaption><\/figure>\n\n\n\n
Now we have the semi-transparent multi-line span<\/code> background with no increase in alpha in the overlap areas. But we still need to get the text and add it on top of it.<\/p>\n\n\n\n
Next, we have a feColorMatrix<\/code><\/a> primitive that uses the green channel as an alpha mask<\/a> (the second value on the last row of the matrix is the only non-zero one) and maxes out (sets to 100%<\/code>) all RGB channels of the output (last column, first three rows), basically painting the output<\/a> white with an alpha equal to the input green channel value. This means the result is full transparency where the input’s green channel is zero (everywhere outside the white text) and opaque white where it’s maxed out (just for the white text).<\/p>\n\n\n
<svg<\/span> width<\/span>=\"0\"<\/span> height<\/span>=\"0\"<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\n<\/span><\/span>  <filter<\/span> id<\/span>=\"alpha\"<\/span>><\/span>\n<\/span><\/span>    <feComponentTransfer<\/span> in<\/span>=\"SourceAlpha\"<\/span> result<\/span>=\"back\"<\/span>><\/span>\n<\/span><\/span>      <feFuncA<\/span> type<\/span>=\"linear\"<\/span> slope<\/span>=\".7\"<\/span> \/><\/span>\n<\/span><\/span>    <\/feComponentTransfer<\/span>><\/span>\n<\/span><\/span>    <feColorMatrix<\/span><\/span>\n<\/span><\/mark>      in<\/span>=\"SourceGraphic\"<\/span><\/span>\n<\/span><\/mark>      values<\/span>=\"0 0 0 0 1 <\/span><\/span>\n<\/span><\/mark>              0 0 0 0 1 <\/span><\/span>\n<\/span><\/mark>              0 0 0 0 1 <\/span><\/span>\n<\/span><\/mark>              0 1 0 0 0\"<\/span><\/span>\n<\/span><\/mark>    \/><\/span>\n<\/span><\/mark>  <\/filter<\/span>><\/span>\n<\/span><\/span><\/svg<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that by default, the inputs of any primitives other than the very first one in the filter<\/code> get set to the result of the primitive right before, so for this feColorMatrix<\/code> primitive we need to explicitly set the input in<\/code> to SourceGraphic<\/code>.<\/p>\n\n\n\n
To get an idea of just how bad the problem is, check out the comparison screenshot below – everything should have all channels either maxed out or zeroed (like on the left), there should be no in betweens (like on the right).<\/p>\n\n\n\n
\"Comparative
expected vs. wide gamut problem (live test<\/a>)<\/em><\/figcaption><\/figure>\n\n\n\n
After a bunch of tests, it results the problem is less noticeable when using the green channel (compared to when using the blue or red channels), so we’re trying to limit this bug on the hardware where it’s possible to hit it.<\/p>\n\n\n\n
We now have just the white text:<\/p>\n\n\n\n
\"Screenshot
result of the second filter step: just the white text<\/em><\/figcaption><\/figure>\n\n\n\n
The final step is to place the semi-transparent black background underneath it (in2<\/code><\/a> specifies the bottom layer):<\/p>\n\n\n
<svg<\/span> width<\/span>=\"0\"<\/span> height<\/span>=\"0\"<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\n<\/span><\/span>  <filter<\/span> id<\/span>=\"alpha\"<\/span>><\/span>\n<\/span><\/span>    <feComponentTransfer<\/span> in<\/span>=\"SourceAlpha\"<\/span> result<\/span>=\"back\"<\/span>><\/span>\n<\/span><\/span>      <feFuncA<\/span> type<\/span>=\"linear\"<\/span> slope<\/span>=\".7\"<\/span> \/><\/span>\n<\/span><\/span>    <\/feComponentTransfer<\/span>><\/span>\n<\/span><\/span>    <feColorMatrix<\/span><\/span>\n<\/span><\/span>      in<\/span>=\"SourceGraphic\"<\/span><\/span>\n<\/span><\/span>      values<\/span>=\"0 0 0 0 1 <\/span><\/span>\n<\/span><\/span>              0 0 0 0 1 <\/span><\/span>\n<\/span><\/span>              0 0 0 0 1 <\/span><\/span>\n<\/span><\/span>              0 1 0 0 0\"<\/span><\/span>\n<\/span><\/span>    \/><\/span>\n<\/span><\/span>    <feBlend<\/span> in2<\/span>=\"back\"<\/span> \/><\/span>\n<\/span><\/mark>  <\/filter<\/span>><\/span>\n<\/span><\/span><\/svg<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that we’re not specifying in<\/code> explicitly because, by default, it’s the result of the previous primitive, the feColorMatrix<\/code>. This is also why we didn’t bother with setting the result<\/code> attribute like we did for the first primitive, the feComponentTransfer<\/code> one because the output of this feColorMatrix<\/code> primitive only gets fed automatically into the in<\/code> input of the final primitive and nowhere else after that.<\/p>\n\n\n\n
Cool, right?<\/p>\n\n\n\n
\"Screenshot
the desired result (live demo<\/a>)<\/em><\/figcaption><\/figure>\n\n\n\n
Expanding the problem scope<\/h2>\n\n\n\n
I thought this was a neat trick worth sharing, so I posted about it on social media, which lead to an interesting conversation on Mastodon.<\/p>\n\n\n\n
I see feMerge<\/code><\/a> often used for this, but here we only have two layers, so I find feBlend<\/code><\/a> (with the default mode<\/code><\/a> of normal<\/code> which just places the top layer in<\/code> over the bottom layer in2<\/code>) a much simpler solution.<\/p>\n\n\n\n
Also note that there’s a reason behind using the green channel to extract the text. This is because when using Chrome and a wide gamut display, we may hit a bug<\/a> which causes feColorMatrix<\/code> to find for example red in what’s 0%<\/code> red, 100%<\/code> green and 0%<\/code> blue. And it’s not just that, but extracting the red channel out of 100%<\/code> red, 0%<\/code> green and 0%<\/code> blue doesn’t give us 100%<\/code> red, but a lower value.<\/p>\n\n\n\n
We’ve also named the result<\/code><\/a> of this primitive back<\/code> so we can reference it later in primitives not immediately folowing this particular feComponentTransfer<\/code> one.<\/p>\n\n\n\n
The first primitive, feComponentTransfer<\/code><\/a>, takes the SourceAlpha<\/code> (basically, the filter<\/code> input, with the RGB channels of all pixels zeroed, all pixels become black, but keep their alpha) as input (in<\/code><\/a>) and scales it to the desired alpha, basically giving us the semitransparent version of the shape of the span<\/code> background. This is because the input alpha is 1<\/code> within the span<\/code> background area and 0<\/code> outside it. Multiplying the desired alpha with 1<\/code> leaves it unchanged, while multiplying it with 0<\/code>… well, zeroes it.<\/p>\n\n\n
We’re also setting box-decoration-break: clone<\/code> so that each wrapped line gets its own padding<\/code> and corner rounding (this is a very neat CSS feature that’s worth looking into<\/a> if you’re not familiar with it).<\/p>\n\n\n\n