Как сделать так, чтобы текст автоматически контрастировал с градиентным фоном?

Question

Я хотел бы иметь переход на задний план от одного цвета к другому, однако это вымывает часть текста.Есть ли способ заставить текст автоматически подстраиваться под фон?Предпочтительно использовать только CSS?

Я пытался использовать решение "mix-blend-mode: разница" из другого форума, но это ничего не дало тексту.

    .container{
  color: white;
  background-color: black;
  background-image: linear-gradient(white, black);
  width:100%;
  margin:0px;
  padding:0px;
}
body{
  width:100%;
  margin:0px;
}

Вот JS Fiddle

Answer 1

Я бы предложил вам использовать градиентный фон на родительском контейнере.И используйте обратный градиент фона для текста с text-fill-color: transparent и background-clip: text.

.container{
  color: white;
  background-color: black;
  width:100%;
  margin:0px;
  padding:0px;
  background: -webkit-linear-gradient(black, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body{
  width:100%;
  margin:0px;
  background-image: linear-gradient(white, black);
}

Вы можете проверить это здесь .. http://jsfiddle.net/nimittshah/hpbwo4q7/

PS - В какой-то момент он будет совпадатьцвет (серый) с цветом фона.

:)