css半透明遮罩层文字

要在半透明遮罩层上显示文字，可以使用 CSS 的伪元素 ::after 或 ::before 来实现。下面是一个示例代码：

HTML:

<div class="overlay">
  <p>这是一段文字</p>
</div>

CSS:

.overlay {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景颜色，最后一个参数为透明度 */
}

.overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay p {
  color: #fff; /* 文字颜色 */
  font-size: 18px;
}

在这个示例中，`.overlay` 是一个具有半透明背景的 div 元素。通过设置 `::after` 伪元素的样式，我们可以使其覆盖整个 `.overlay`，并使用 `display:flex`、`align-items:center` 和 `justify-content:center` 将文字居中显示。你可以根据需要调整 `.overlay` 的大小和样式，以及文字的颜色和大小。