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

/* 方法一：使用伪元素进行背景图层叠 */
.container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('image.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0.5; /* 设置背景透明度 */
}
 
.content {
  position: relative; /* 确保文字位于伪元素之上 */
  color: #fff; /* 设置文字颜色为白色，即不透明 */
}
 
/* 方法二：使用背景图设置为元素背景，并使用rgba颜色设置半透明背景 */
.container {
  background: rgba(255, 255, 255, 0.5); /* 使用rgba设置背景色，同时设置透明度 */
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}
 
.content {
  color: #000; /* 设置文字颜色为黑色，即不透明 */
}

这两种方法均可以实现背景图片透明而文字不透明的效果。第一种方法通过为容器添加一个伪元素来设置背景图，并调整透明度。第二种方法则是直接设置容器的背景图和背景色，并使用rgba颜色值来控制透明度。