要实现背景色透明而文字不透明的效果，我们可以使用 CSS 的 `rgba` 颜色值来设置背景色。`rgba` 方法接受四个参数：红色、绿色、蓝色和透明度(alpha)，其中透明度是一个介于 0（完全透明）和 1（完全不透明）之间的值。

这里有一个简单的例子：

```css
.transparent-background {
  /* 设置文字颜色为不透明的黑色 */
  color: #000000; 
  /* 设置背景色为半透明的白色 */
  background-color: rgba(255, 255, 255, 0.5);
}
```

在上述 CSS 类中，文字颜色使用了十六进制颜色值，这意味着文字是不透明的。背景颜色则使用了 `rgba` 颜色值，其中 alpha 值设置为 0.5，这意味着背景色是半透明的。这样，我们就可以得到一个半透明的背景，同时保持文字内容的不透明性。

HTML 元素使用这个类如下：

```html
<div class="transparent-background">
  这段文字的背景是半透明的，但文字本身是不透明的。
</div>
```

使用这种方法，无论你将背景设置成什么颜色，文字本身的透明度都不会受到影响。

最简单的方法是使用 2 个 div，其中 1 个带有背景，1 个带有文本：

```
#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>
```

运行代码片段隐藏结果


我的技巧是创建一个透明的 .png 颜色并使用`background:url()`。

CSS 如何将不透明度仅设置为背景色而不对上面的文字生效？

3个答案

你的答案