html - 如何在 CSS 中制作半透明文本？

Question

如何在该网站的开头创建半透明文本https://superscene.pro/ 我真的想知道如何使文本保持定义颜色并在后面有对象时变得半透明？也许有人可以提供有关如何在该网站上拖动对象的提示

Answer 1

您可以使用以下方法执行此操作：

mix-blend-mode: exclusion;

你知道，有一个叫做“检查器”的东西，你可以在其中查看样式和编辑文档的标签。检查员看起来像这样：

Answer 2

通过查看它们在 CSS 中的来源，它似乎来自以下规则：

mix-blend-mode: exclusion;

添加此规则应该可以满足您的要求。如果您想了解更多信息，我建议您看这里：https ://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 3

您可以css mix-blend-mode在文本容器或文本本身中使用，您可以为文本添加颜色以提供更多详细信息，更多信息请点击此处

.bg{
  background-image:url('https://i.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U');
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.blend{
  mix-blend-mode: exclusion;
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 6rem;
}

<div class="bg">
   <div class="blend">
      <p>This ts text</p>
   </div>
</div>