0

我曾经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) 上：

在此处输入图像描述

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

4

2 回答 2

0

为什么不使用颜色叠加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 */
}
于 2019-10-08T06:30:58.430 回答
0

我在caniuse 的列表中没有看到适用于 iOS 的 Chrome ，但浏览器对该 css 规则的支持仍然参差不齐。可能是根本不支持它。由于 Edge 不支持它，因此通常最好有一个失败时的备份计划。您是否在 iOS 上尝试过其他浏览器？

于 2019-10-08T05:11:51.133 回答