当尝试 glassmorphism 样式并使用 css 背景过滤器时,滚动时元素顶部出现深色模糊边缘。我觉得这应该是一个简单的修复,但我已经尝试了我所知道的一切(这显然是不够的)并且无法弄清楚。我创建了一支笔,这样你就可以看到我在说什么。由于一些令人困惑的原因,你必须在 codepen 中打开它才能看到不想要的效果。
body {
background-image: url("https://www.theuiaa.org/wp-content/uploads/2017/12/2018_banner.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 200vh;
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: soft-light;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
}
.card {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 320px;
height: 540px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
}
.arrow {
position: sticky;
top: 0px;
font-size: 200px;
line-height: 1;
color: red;
}
.card p {
font-size: 32px;
padding: 20px;
}
<div class="container">
<div class="card">
<div class="arrow"><span>🠑</span></div>
<p>As you can see when you scroll down, as soon as the card hits the top of the screen, you get a blurred edge. Not cool...</p>
</div>
</div>
我认为您发现了 Chrome 问题! (在 Firefox 中不会发生).
我很快就检查了chromium bugs,但没有发现任何接近的东西..所以我建议你报告它!
另外,我做了一个测试来确定黑色“渐变”来自哪里...我改变了 Codepen 的
background
颜色 .main-header
!!
要重现,请将其粘贴到控制台中:
document.querySelector(".main-header").style.background = "red"
预期结果是:
但令人惊讶的是“渐变”现在变成了红色。
您当然知道 codepen 结果是
iframe
...所以我认为这称为“绘画”问题。
这个问题大家找到解决办法了吗?
我花了整个晚上试图找到一个!