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

问题描述

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

解决方法

您可以使用：

mix-blend-mode: exclusion;

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

,

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

mix-blend-mode: exclusion;

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

,

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

.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>