AI 摘要：探讨内联文本背景重叠导致透明度异常的问题，并提供基于 SVG 滤镜的跨浏览器解决方案。

本文详细解析了内联元素上半透明背景重叠时透明度叠加变深的问题。文章首先介绍使用 CSS 属性如 box-decoration-break: clone 实现每行独立的包裹效果，但因内边距重叠造成重叠处透明度提升，进而引发背景变深的问题。作者分享了基于 SVG 滤镜的解决方案，通过使用诸如 <feComponentTransfer> 、 <feColorMatrix> 、 <feBlend> 等滤镜原语，逐步提取背景区域和文本形状，再解决复杂场景下（如大内边距、文字与背景颜色非纯黑/白情况）的混色问题。此外，还讨论了利用 CSS 变量设置 RGBA 值、处理抗锯齿问题，以及不同浏览器（Chrome 与 Firefox）下的兼容性差异。最终作者展示了一套可控且跨浏览器工作的方案，并提供了实验演示以供参考。

Frontend Masters

A Deep Dive into the Inline Background Overlap Problem

A tweet by Lucas Bonomi 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.