2

我正在使用mix-blend-mode属性处理敲除文本。当我打开控制台以使用开发人员工具测试响应性时，混合文本的上方和下方会出现和消失的小线条。在每次选择时，我在开发人员工具控制台的设备选择器上都会出现这个错误。这些是一些例子：

页面调整为 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 文件上。

我尝试使用will-change: opacitydescribe here和here，但我没有运气。

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

4

1 回答 1

4

如果您以结果为导向，那么此解决方案可能会帮助您摆脱此问题。我也检查过，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>

于 2019-11-29T05:10:26.590 回答