Как совместить эффект дуплекса и CSS mix-blend-mode:difference

У меня есть довольно специфический случай, который я не могу решить здесь. В настоящее время я пытаюсь реализовать дизайн, который в значительной степени зависит от градиентов и режимов наложения. Я пытаюсь добиться этого эффекта, где черный становится цветом 1, а белый становится цвет 2.

Изменить. Мой градиент не является стандартным линейным или радиальным градиентом. Я использую разные слои со случайно расположенными элементами для создания органического градиента, как показано ниже. пример

Решение, которое, как я думал, может сработать, состояло в том, чтобы использовать фильтр SVG <feComponentTransfer> для сопоставления моего черно-белого диапазона с двумя моими пользовательскими цветами. Он отлично работает, когда я применяю его к своим элементам переднего плана, которые находятся в mix-blend-mode: difference (шаг 2) но как только я применяю его к моему черно-белому градиентному фону, режим наложения CSS подхватывает цвета, и эффект дуплекса больше не работает. (шаг 3)

Любая помощь или предложение о том, как подойти к проблеме, будет принята с благодарностью! Спасибо


gradient css mix-blend-mode svg-filters
person Paul Lacour    schedule 28.08.2020    source источник
comment
Пример работает так, как задумано — у вас есть обратный градиент в вашем тексте — какого эффекта вы пытаетесь достичь?   -  person Michael Mullany    schedule 01.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Может быть, вы можете просто рассмотреть два разных градиента, один для цвета текста, а другой для фона.

Вот простой пример:

.container {
  font-size:25px;
  text-align:center;
  background:radial-gradient(circle, red, blue, red);
}

.container > div {
  overflow:auto;
  background:radial-gradient(circle, blue, red, blue);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
<div class="container">
  <div>
    <h1> lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis, risus id accumsan iaculis, ligula ex pellentesque lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada tincidun</p>
  </div>
</div>

person Temani Afif    schedule 28.08.2020
comment
Привет! Спасибо за ответ. Возможно, на моих снимках экрана это недостаточно ясно, но мой фон сложнее, чем просто радиальный градиент, я построил логику для создания органического градиента... Вот почему я ищу решения, подобные тому, которое я объяснил с фильтрами svg. Я уточню свой вопрос об этом. - person Paul Lacour; 28.08.2020
comment
@PaulLacour применяет тот же прием: вы создаете два разных фона и применяете один к контейнеру, а другой к тексту. - person Temani Afif; 28.08.2020
comment
Оооооооооооооооооооооооооооооооооооочень красиво, я посмотрю на это :) - person Paul Lacour; 28.08.2020
comment
Ну, это могло бы сработать, если бы функция CSS element() широко поддерживалась, тогда я мог бы выбрать свой случайно сгенерированный пользовательский градиент для использования в качестве фона, но я думаю, что мне придется искать другое решение. - person Paul Lacour; 28.08.2020
comment
@PaulLacour поделитесь сгенерированным градиентом в вопросе и кодом, который вы используете для его создания. - person Temani Afif; 28.08.2020