Блог

Главная - Вопросы по программированию - mix-blend-mode: оттенок не работает в safari — Как я могу это решить?

mix-blend-mode: оттенок не работает в safari — Как я могу это решить?

#html #css #safari

#HTML #css #safari

Вопрос:

Я пытаюсь использовать mix-blend-mode: hue в safari на macOS, но у меня не получается. Почему? Мой код выглядит так:

 .hue-demo {
  height: 100vh;
  width: 100vw;
  background-image: url('https://images.unsplash.com/photo-1600639853470-112d492226da?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=933amp;q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.hue-demo::before {
  content: '';
  mix-blend-mode: hue;
  height: 100%;
  max-height: 100%;
  width: 100%;
  background: linear-gradient(45deg, #23a6d5 38%, #FFEB3B 69%);
  position: absolute;
  left: 0;
  bottom; 0;
}  
 <div class="hue-demo" />

Как я могу это решить? Теперь у меня проблемы в Chrome и firefox

Примечание: Эта демонстрация работает в Safari на странице stackoverflow. Я не знаю, почему это работает, а не мой веб-проект

Ответ №1:

Я решил эту проблему. Теперь я использую background-blend-mode: hue так:

 .hue-demo {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(45deg, #23a6d5 38%, #FFEB3B 69%), url('https://images.unsplash.com/photo-1600639853470-112d492226da?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=933amp;q=80');
  background-repeat: no-repeat;
  background-blend-mode: hue;
  background-size: cover;
  background-position: center;
}  
 <div class="hue-demo" />