如何使文本自动与渐变背景形成对比？答案

【问题标题】：How do you make text automatically contrast with a gradient background?如何使文本自动与渐变背景形成对比？
【发布时间】：2018-10-15 18:55:34
【问题描述】：

我想要从一种颜色到另一种颜色的背景过渡，但是这会洗掉一些文本。有没有办法让文字自动适应背景？最好只使用 CSS？

我尝试使用另一个论坛的“mix-blend-mode:difference”解决方案，但这对文本没有任何影响。

    .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

【问题讨论】：

可能重复：stackoverflow.com/questions/52797638/…
这些对我来说不是实用的解决方案。文字阴影使文字看起来很糟糕，而且我没有使用图像背景，所以我不能让背景变暗。渐变应该从默认的白色背景混合到较暗的颜色。

标签： css html background-color linear-gradients

【解决方案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/

附： - 在某些时候，它会将颜色（灰色）与背景颜色匹配。

【讨论】：

我看到了类似的解决方案，但显然灰色与灰色混合的中间部分是一个巨大的问题。