我希望文本具有模糊的白色背景。但我实际上正在努力解决模糊效果。每次我尝试使用滤镜模糊时,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 元素设置一个固定的宽度或高度。任何人都可以帮助我达到上述预期的结果吗?
答案 0 :(得分: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
应该就足够了。
答案 1 :(得分:-1)
从您的屏幕截图来看,您似乎想要外发光。试试这个吧!
text-shadow: 0 0 32px black;
第一个值是 x
和 y
。第三个值是阴影模糊值,最后一个值是颜色。