模糊文本字段的背景（顺风或纯CSS）

Question

我希望文本具有模糊的白色背景。但我实际上正在努力应对模糊效果。每次我尝试使用滤镜模糊时，div 都会变得模糊，但我的文本会消失。

这是我迄今为止用 tailwindcss 编写的代码：

<div class="inline-block">
          <div class="px-1 filter blur bg-white bg-opacity-75">
            <span
              class="font-bold text-black-dark text-sm leading-17px z-1003"
            >
              {{ dynamicText }}
            </span>
          </div>
        </div>

它应该是这样的：

因为文本是动态的，所以我无法为父 div 元素设置固定的宽度或高度。有人可以帮助我实现上述期望的结果吗？

Answer 1

你可以试试backdrop-filter: blur(10px);

如此处所述：https ://css-tricks.com/almanac/properties/b/backdrop-filter/

最新的 Tailwind（v2.1.0）确实支持了它：https ://github.com/tailwindlabs/tailwindcss/releases#new-filter-and-backdrop-filter-utilities

所以，backdrop-filter backdrop-blur如果你是最新的，a 应该足够了。