CSS实现背景图片透明文字不透明效果的两种方法

方法一：使用CSS3中的background-clip和text-fill-color属性

.container {
  background-image: url("your-image-url.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
}

上述代码中，我们将背景图片设置为容器的背景，并使用background-clip和-webkit-background-clip属性将背景图片裁剪成文本的形状。然后，使用text-fill-color属性将文本颜色设置为透明，从而实现透明的文本效果。

方法二：使用伪元素与混合模式

.container {
  background-image: url("your-image-url.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: overlay;
}

.container p {
  position: relative;
  z-index: 1;
  color: white;
}

上述代码中，我们将背景图片设置为容器的背景，并使用伪元素::before在容器中创建一个半透明的黑色遮罩。然后，使用mix-blend-mode属性将遮罩与背景图片混合，实现背景图片透明的效果。最后，将文本的z-index属性设置为1，使其显示在遮罩层之上，达到不透明的文本效果。