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

要实现背景色透明而文字不透明的效果，我们可以使用 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>

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

听起来你想使用透明背景，在这种情况下你可以尝试使用该rgba()功能：

rgba(R, G, B, A)

R（红色）、G（绿色）和 B（蓝色）可以是<integer>s 或<percentage>s，其中数字 255 对应于 100%。 A (alpha) 可以是<number>0 到 1 之间的 a，或者 a <percentage>，其中数字 1 对应于 100%（完全不透明度）。

RGBa 示例

shell
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

一个小例子展示了如何rgba使用。

截至 2018 年，几乎每个浏览器都支持该rgba语法。

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

shell
#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>

运行代码片段隐藏结果

展开片段

仅适用于较少用户：

如果您不喜欢使用 RGBA 而是使用 HEX 设置颜色，有一些解决方案。

你可以使用像这样的 mixin：

shell
.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

并像这样使用它：

shell
.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

实际上，这是内置的 Less 函数也提供的：

shell
.myClass {
    background-color: fade(#FFFFFF, 50%);
}

请参阅_如何使用 Less 编译器将十六进制颜色转换为 rgba？_

我有同样的问题。我想要 100% 透明的背景色。只需使用此代码即可；这对我来说非常有用：

shell
rgba(54, 25, 25, .00004);

您可以在该网页的左侧（联系表单区域）看到示例。

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