我目前在一个网站上工作,需要backdrop-filter
使用其模糊功能。一切都按预期工作:
- 适用于Windows和MacOS的Chrome
- 适用于iOS和MacOS的Safari
我知道不是所有的浏览器都支持backdrop-filter
,这就是为什么我没有提到Firefox。然而,代码似乎在Chrome for IOS上不起作用。作为参考,对于Chrome IOS,我运行的版本为87.0.4280.77。
我已经检查了“caniuse.com”,似乎应该支持该效果(https://caniuse.com/?search=backdrop-filter供参考)。
下面是简短的HTML:
<div class="blur">
<h1>My Resume</h1>
</div>
<div class="blur">
<h2>“Innovation distinguishes between a leader and a follower” ― Steve Jobs</h2>
</div>
下面是相应的CSS:
.blur::before{
backdrop-filter: blur(2px) contrast(0.6);
-webkit-backdrop-filter: blur(2px) contrast(0.6);
width: contain;
border-radius: 4px;
padding: 0.3rem;
}
.blur {
backdrop-filter: blur(2px) contrast(0.6);
-webkit-backdrop-filter: blur(2px) contrast(0.6);
width: contain;
border-radius: 4px;
padding: 0.3rem;
}
我的代码有问题吗?我的Chrome有问题吗?还是Chrome for IOS不支持backdrop-filter
?
1条答案
按热度按时间zsohkypk1#
contrast
使用百分比而不是小数contrast
不支持小数