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

Question

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

Answer 1

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

mix-blend-mode: exclusion;

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

Answer 2

您可以使用：

mix-blend-mode: exclusion;

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

Answer 3

您可以在文本容器或文本本身中使用 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>

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

How to make translucent text in CSS?

html

css

textstyle