Question

我正尝试使我的文字仅保留黑白颜色，具体取决于背景。我有一个使用了剪切路径的图像，并且有一个文本从“干净”侧延伸到图像侧。这样做的目的是使文本在干净的一侧变黑，在图像的一侧变白。

自从我不知道从哪里开始以来，我已经尝试了几天了（我尝试了很多不同的解决方案，但还没有做到）。我最接近的是使用“混合混合模式：差异”。

此解决方案可以正常工作，但是由于我无法控制图像的不透明度，因此这并不是我的初衷。是否可以实现我正在寻找的东西，如果是，我应该寻找哪种技术？

通过查看代码笔可能更容易理解我要解释的内容。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(https://source.unsplash.com/1600x900/?nature,water) center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.slant {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  clip-path: polygon(0 0, 100% 0%, 100% 14%, 0 86%);
  background: white;
}

h2 {
  color: white;
  font-family: sans-serif;
  font-size: 100px;
  text-transform: uppercase;
  margin-top: 20%;
  text-align: center;
  mix-blend-mode: difference;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="outer">
    <div class="blur"></div>
    <div class="slant"></div>
    <header>
      <h2 contentEditable role='textbox' aria-multiline='true'>some fancy text</h2>
    </header>
  </div>
</body>

</html>

https://codepen.io/battleaxe/pen/eYmxNEJ

尝试根据CSS的背景图片获取黑白文本

0 个答案: