我使用 background-blend-mode: lighten; 从根本上减轻了黑色背景图像 (refath.github.io/Survey) 的强度。虽然它在桌面上完美运行，但我在手机上检查了该网站，出于某种原因，黑色背景只是覆盖了 background-blend-mode，如果这有意义的话。我什至尝试使用 !important 覆盖任何可能干扰设计的库，但无济于事。相关代码如下:
CSS:
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
background-color: rgba(255, 255, 255, 0.95);
background-blend-mode: lighten !important;
max-width: 100%;
overflow-x: hidden;
}<body>
</body>在桌面(Chrome)上:
在 iPhone X(Chrome)上:
如有任何帮助，我们将不胜感激。谢谢。
最佳答案
我在 caniuse's list 上没有看到适用于 iOS 的 Chrome , 但浏览器对该 css 规则的支持仍然参差不齐。可能只是还没有对它的支持。由于 Edge 不支持它，因此通常最好有一个备份计划以备不时之需。您是否在 iOS 上尝试过其他浏览器？
关于css - 背景混合模式不适用于移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58280031/