背景滤镜:模糊不适用于绝对位置元素 [英] Backdrop-filter: Blur not working on a position absolute element
本文介绍了背景滤镜:模糊不适用于绝对位置元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用background-filter:blur制作具有玻璃效果的工具提示,只是该滤镜似乎无法在绝对位置上起作用.我想这是因为该项目已经超出了文档流程,所以无法识别背景,但是可能有解决该问题的方法.
I'm trying to make a tooltip with a glass effect using the backdrop-filter: blur, except that the filter doesn't seem to work on elements in absolute position. I imagine this is because the item has gone out of the document flow so don't recognize the background, but there might be workarounds to fix it.
推荐答案
我可以给您一个由用户在堆栈溢出中给出的示例.我在下面给出了示例代码,希望对您有所帮助:
I can give you a sample which was given by a user in stack overflow. I have given the sample code below Hope it helps:
CSS:
body,
main::before {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}
main {
margin: 100px auto;
position: relative;
padding: 10px 5px;
background: hsla(0, 0%, 100%, .3);
font-size: 20px;
font-family: 'Lora', serif;
line-height: 1.5;
border-radius: 10px;
width: 60%;
box-shadow: 5px 3px 30px black;
overflow: hidden;
}
main::before {
content: '';
margin: -35px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
z-index: -1;
}
HTML:
<main>
<blockquote>"The more often we see the things around us - even the beautiful and wonderful things - the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds -
even those we love. Because we see things so often, we see them less and less."
<footer>—
<cite>
Joseph B. Wirthlin
</cite>
</footer>
</blockquote>
</main>
这篇关于背景滤镜:模糊不适用于绝对位置元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文