Background-blend-mode не работает на мобильном телефоне - PullRequest
Новая
       23

Background-blend-mode не работает на мобильном телефоне

0 голосов
/ 08 октября 2019

Я использовал 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):

enter image description here

на iPhone X (Chrome):

enter image description here

Любая помощь будет принята с благодарностью. Спасибо.

Ответы [ 2 ]

0 голосов
/ 08 октября 2019

Почему бы не использовать наложение цвета на 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 */
}
0 голосов
/ 08 октября 2019

Я не вижу Chrome для iOS в списке caniuse , но поддержка браузером для этого правила CSS все еще не определена. Вполне возможно, что его пока просто нет. Поскольку Edge его не поддерживает, обычно полезно иметь план резервного копирования на случай сбоя. Вы пробовали другие браузеры на iOS?

...