смешанный режим не работает в Chrome - PullRequest
Новая
       12

смешанный режим не работает в Chrome

0 голосов
/ 02 июля 2018

У меня проблема с mix-blend-mode в Chrome. Это не работает должным образом. С другой стороны, в Firefox и Safari он работает без проблем. Я хочу добиться эффекта вырезания текста. Спасибо за помощь! 

h1 {
  mix-blend-mode: screen;
  background: white;
  color: black;
}


body {
  background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
    no-repeat left / cover;
}

h1 {
  font-family: "Righteous", cursive;
  mix-blend-mode: screen;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
  margin: 0;
  font-size: 6em;
  line-height: 0.95;
  background: white;
  color: black;
  text-transform: uppercase;
  max-width: max-content;
}
<h1>
  <span>Simple</span>
  <span>Cutout</span>
  <span>Heading</span>
  <span>Effect</span>
</h1>

Вот рабочий код на codepen

1 Ответ

0 голосов
/ 02 июля 2018

Chrome имеет некоторые проблемы с микс-режимом смешивания и телом

используйте промежуточный div для изображения 

.base {
  background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
    no-repeat left / cover;
}

h1 {
  font-family: "Righteous", cursive;
  mix-blend-mode: screen;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
  margin: 0;
  font-size: 6em;
  line-height: 0.95;
  background: white;
  color: black;
  text-transform: uppercase;
  max-width: max-content;
}
<div class="base">
<h1>
  <span>Simple</span>
  <span>Cutout</span>
  <span>Heading</span>
  <span>Effect</span>
</h1>
</div>
...