tailwindcss 如何加上背景文字并放在中间的位置

可以使用 flex 布局和伪元素来实现在中间位置添加背景文字。

首先，在要添加背景文字的元素上添加一个相对定位的父元素，并设置宽度和高度。
在父元素上使用 flex 布局，让子元素垂直和水平居中。
在父元素上使用 ::before 伪元素来添加背景文字，并将其绝对定位在父元素的中心位置。
设置背景文字的样式，例如字体大小、颜色、背景色等。

以下是示例代码：

HTML:

<div class="bg-text">
  <h1>这是一段文本</h1>
</div>

CSS:

.bg-text {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-text::before {
  content: "背景文字";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  background-color: #000;
  padding: 20px;
  border-radius: 10px;
}

在上述代码中，我们使用了 flex 布局将子元素垂直和水平居中，并使用 ::before 伪元素在中心位置添加了背景文字。我们还设置了背景文字的样式，例如字体大小、颜色、背景色、内边距和边框半径。修改这些样式可以根据需要调整背景文字的外观