Question

我正在使用mix-blend-mode属性处理基因剔除文本。当我打开控制台以使用Developer工具测试响应度时，在混合文本的上方和下方几乎没有出现和消失的行。在每次选择时，我都会在开发人员工具控制台的设备选择器上执行此错误。这些是一些示例：

页面大小已调整为iPad Pro大小

页面大小已调整为Pixel 2XL大小

这是我用来创建此文本的代码：

.backdrop {
  background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
  background-size: contain;
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}

.text {
  font: bolder 20vw "Arial";
  text-align: center;
  margin: 0;
}

.screen {
  color: black;
  mix-blend-mode: screen;
  background-color: #fff;
}

<div class="backdrop">
  <p class="text screen">Taitō</p>
</div>

我注意到，当您在Codepen上运行代码时，不会发生此错误，我不知道为什么会这样。但是，它可以在简单的静态HTML文件上发生。

我尝试使用here和here描述的will-change: opacity，但我没有运气。

我的Chrome版本是版本78.0.3904.108 。此错误仅在Chrome上发生。如果有人可以提供建议，我将不胜感激。

Answer 1

如果您注重结果，那么此解决方案可能会帮助您摆脱此问题。我也检查过mix-blend-mode，但正如您所说的那样，Chrome中存在问题。

我使用background-clip: text来达到相同的结果。

页面大小已调整为iPad Pro大小

页面大小已调整为Pixel 2XL大小

请告诉我这是否有帮助。

.backdrop {
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}
.text {
  font: bolder 20vw "Arial";
  text-align: center;
  margin: 0;
}
.screen {
  color: transparent;
  background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: contain;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <div class="backdrop">
    <p class="text screen">Taitō</p>
  </div>
</body>
</html>

文字混合混合模式错误

1 个答案: