Mastodon @Mastodon

**Ana Tudor** @anatudor · 6d *

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

Ana Tudor @anatudor@mastodon.social

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)?