CSS实现背景图片透明而文字不透明效果

可以使用 CSS3 中的 RGBA 颜色值来实现这个效果。具体实现步骤如下：

1. 将背景图片作为元素的背景（background）。

2. 设置元素的背景颜色为 RGBA 颜色值，例如：background-color: rgba(255, 255, 255, 0.5)。

3. 设置元素内文字的颜色为不透明的颜色，例如：color: #000。

其中，RGBA 颜色值中的第四个参数表示透明度，取值范围为 0 ~ 1，0 表示完全透明，1 表示完全不透明。

示例代码如下：

.element {
  background: url('example.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
}

这样，就可以实现背景图片透明而文字不透明的效果。

相关问题

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，使其显示在遮罩层之上，达到不透明的文本效果。

css实现背景透明，文字不透明

可以使用CSS中的opacity属性来实现文字不透明，背景透明的效果。

例如：

div {
  background-color: rgba(255, 255, 255, 0.5); /* 背景颜色设置为半透明白色 */
  opacity: 0.8; /* 设置文字不透明度为0.8 */
}

这样可以实现背景透明，文字不透明的效果。