A DEEP DIVE INTO THE INLINE BACKGROUND OVERLAP PROBLEM

Summary from the TLDR Web Dev newsletter

The CSS inline background overlap problem is where semi-transparent backgrounds on inline text with padding overlap and create darker intersections. This problem can be fixed with an SVG filter, using `feComponentTransfer` to restore transparency and blend the text on top. However, a better approach involves setting shapes and RGBA values in CSS and passing them to the SVG filter via different channels/alpha points, so you get full CSS control over text and background without hardcoding values in the SVG filter.