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

Posted 2023-03-07

【中文标题】文本字段的模糊背景（顺风或纯 css）

【英文标题】：Blur background of text field (tailwind or plain css)

【发布时间】：2021-07-05 10:11:53

【问题描述】：

我希望文本具有模糊的白色背景。但我实际上正在努力解决模糊效果。每次我尝试使用滤镜模糊时，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 元素设置固定的宽度或高度。任何人都可以帮助我达到上述要求的结果吗？

【参考方案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 就足够了。

【讨论】：

感谢您的回答。但这对我不起作用。效果不是我们想要的，并且 firefox 不支持背景滤镜/模糊 .. :(

您是否尝试过给定链接中 CSS 技巧中显示的替代方案？

嗨@kissu，是的，我试过了。不是想要的效果，firefox也不支持:(效果应该是某种“云效果”。认为这是更好的命名而不是模糊......

您是否在 codepen 上查找过与您正在寻找的类似效果？ codepen.io/search/…

是的，我已经看过了，但没有找到类似的:(

【参考方案2】：

从您的屏幕截图来看，您似乎想要外发光。试试这样的东西！

text-shadow: 0 0 32px black;

第一个值是x 和y。第三个值是阴影模糊值，最后一个是颜色。

【讨论】：

谢谢，但这不起作用，也不是我想要的