背景混合模式在移动设备上不起作用答案

【问题标题】：Background-blend-mode not working on mobile背景混合模式在移动设备上不起作用
【发布时间】：2020-02-05 08:49:26
【问题描述】：

我使用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) 上：

任何帮助将不胜感激。谢谢。

【问题讨论】：

请发布您的css和html。这将使您更容易理解可能出现的问题。谢谢！
感谢您告诉我！我刚刚添加了相关的 CSS，以及用于添加信息的 sn-p。

标签： css background-image background-blend-mode

【解决方案1】：

我在caniuse's list 上没有看到适用于 iOS 的 Chrome，但浏览器对该 css 规则的支持仍然参差不齐。可能是根本不支持它。由于 Edge 不支持它，因此最好为它失败时制定一个备份计划。你试过 iOS 上的其他浏览器吗？

【讨论】：

【解决方案2】：

为什么不在body 上使用颜色叠加

body{
    padding: 20px;
    margin: 0;
    background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}


body:before{
    content: '';
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95); /* Your desire color */
    z-index: 2;
}

或

<div id="overlay"></div>//place inside body tag

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Your desire color */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

【讨论】：