在 Firefox 中使用圆形文本背景的“粘稠”CSS SVG 过滤器时出现问题

Question

我试图重新创建在这个 Dribble 设计中找到的以下圆形背景效果：

通过一些研究，我发现这被称为粘稠效应。我尝试实现这些[带有粘性过滤器的文本背景]（带有粘性过滤器的文本背景）和带有SVG过滤器的粘性文本背景，但它们不适用于Firefox。我正在寻找在 Chrome 上显示的圆角内角效果。

这是我的尝试：

<p>I just want to smile and live life and enjoy every moment while I still have it.</p>


<svg style="display: none">
  <defs>
    <filter id="gooey-filter">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="7.5"/>
      <feColorMatrix in="blur" result="colormatrix"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 58 -9" />
      <feBlend in="SourceGraphic" in2="colormatrix"/>
    </filter>
  </defs>
</svg>

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

body {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  max-width: 25ch;
}

p {
  display: inline;
  position: relative;
  padding: 0.5em;
  line-height: 1.3;
  background: #D1FB96;
  border-radius: 30px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: url('#gooey-filter');
}

span:focus {
    outline: 0;
}

在基于 Chrome 的浏览器上，它看起来像这样：

在 Firefox 上，它看起来像这样：

我知道粘糊糊的效果已被重新审视，但我不确定如何对基于文本的示例实施更改。

这是我的代码笔

Answer 1

你只需要添加一个带有

position: relative

风格的内部跨度。

<p>
  <span style="position:relative">
    I just want to smile and live life and enjoy every moment while I still have it.
  </span>
</p>