Mastodon @Mastodon

Hi, mastodon I have a new article out!

A Deep Dive into the Inline Background Overlap Problem: https://frontendmasters.com/blog/overlapping-inline-backgrounds/

How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?

Answer in article, but think a bit about it first.

✅ Desired result: consecutive line backgrounds overlap doesn't result in alpha increase and the text is always on top of the background, including that of adjacent lines.

❌ Problem: by default, consecutive span lines with semi-transparent backgrounds have an increase in alpha at the overlap and the text on all but the last line is partly covered by the background of the next.

#CSS #SVG #filter

Mar 18, 2025, 08:29 PM·

11boosts·10favorites

**Ana Tudor** @anatudor · 4d

Ana Tudor @anatudor

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

The visual result showing four lines of text, middle aligned, each with its own semitransparent background and padding. The padding on each line leads to intersection, and where we have intersection, the semi-transparent background becomes more opaque.

The CSS producing this is:
```
p > span {
padding: .25em;
border-radius: 5px;
background: rgb(0 0 0/ var(--a, .7));
color: #fff;
/* add lateral padding + border-radius to each line */
box-decoration-break: clone
}
```

#CSS #SVG #filter

**Amelia Bellamy-Royds** @AmeliaBR@front-end.social · 4d

Amelia Bellamy-Royds @AmeliaBR@front-end.social

This is a doozy folks!

One of those little design touches that looks like it should be an easy fix, but the generalized solution — to get this working for any colour combination, and to be able to set those colours in CSS stylesheets — is an absolute brain twister. Ana's going to take you on a tour of the possibilities & limitations of CSS & SVG filters.

(And even the final fix, while supported cross-browser, can chew up your CPU doing graphical rendering.)

@anatudor

https://frontendmasters.com/blog/overlapping-inline-backgrounds/

frontendmasters.comA Deep Dive into the Inline Background Overlap Problem – Frontend Masters Blog`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.

**Amelia Bellamy-Royds** @AmeliaBR@front-end.social · 4d

Amelia Bellamy-Royds @AmeliaBR@front-end.social

I'd love to see some discussion about how we could incorporate better backgrounds for inline elements directly in CSS.

Could we have `box-decoration: merge` that paints the backgrounds on a multi-line inline element as one operation, after merging together?

Or for the issue of the background of one inline overlapping the text of the previous line, a property like `paint-order` to send them to the back?

Or `background-clip: line-boxes` for when the full block should have highlight?

@anatudor

**Zoltan Hawryluk** @zoltandulac · 4d *

4d *

Zoltan Hawryluk @zoltandulac

@AmeliaBR I absolutely love Ana's article since doing this type of accessible design (i.e. promoting good color contrast no matter what the background image) while not having unintended overlaps has been tricky in the past. Thanks @anatudor !

(And yes -- it would be great if there was a native CSS solution ... but this'll do for now ... )

**Patrick H. Lauke** @patrick_h_lauke · 4d

Patrick H. Lauke @patrick_h_lauke

@AmeliaBR @anatudor as already mentioned in earlier chats...yes, have been pining for a general solution that doesn't require a PhD or a supercomputer ... https://codepen.io/patrickhlauke/pen/jOzJwvZ

codepen.ioMissing CSS feature - setting background to always be in the back...