Question

我希望背景颜色从一种颜色过渡到另一种颜色，但这会洗掉一些文本。有没有一种方法可以使文本自动调整为背景？最好只使用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

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/

P.S。 -在某些时候它将使颜色（灰色）与背景颜色匹配。

：）

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

1 个答案: