Блог

Главная - Вопросы по программированию - Смешанный режим наложения некорректно отображается в Safari

Смешанный режим наложения некорректно отображается в Safari

#css #mix-blend-mode

Вопрос:

Я столкнулся с этой проблемой в safari, где использование mix-blend-mode: color; работает некорректно. Я протестировал другие режимы наложения, которые работают нормально. Как ни странно, несмотря на то, что это кажется очень распространенной проблемой, я не нашел color обсуждения конкретного режима наложения. Есть идеи, как это исправить? Я попытался добавить #overlay внутри #image div, но получил те же результаты.

 #image{
  display: block;
  position: fixed;
  background: url(https://i.picsum.photos/id/1070/800/600.jpg?hmac=TQrM01Rpkjic5HhbuMrBGEdrR3mjDSyubaTTRmkMqVU);
  background-size: cover;
  width: 600px;
  height: 400px;
  top: 0;
  left: 0;
}

#overlay{
  display: block;
  position: fixed;
  background: linear-gradient(120deg, rgba(178,151,4,0.75) 0%, rgba(43,48,59,1) 100%);
  width: 600px;
  height: 400px;
  top: 0;
  left: 0;
  mix-blend-mode: color;
} 
 <div id="image"></div>
<div id="overlay"></div>

Комментарии:

1. Согласно caniuse.com/css-mixblendmode Safari, начиная с текущей версии, не поддерживает режим наложения цветов (среди прочих). Так что вы, возможно, вообще не сможете это исправить с помощью CSS. Какие-либо причины, по которым вы не можете применить графический эффект к изображению с помощью программы раньше?

2. К сожалению, не могу использовать отредактированные изображения из-за сложности, но спасибо за ответ, это помогло.

Метки: