CSS的不透明度只能是背景色，而不是文字吗？

Question

我可以将opacity属性分配给仅background属性div而不是其上的文本吗？我试过了：background: #CCC;opacity: 0.6;但这不会改变不透明度。

Answer 1

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

rgba(R, G, B, A)

R（红色），G（绿色）和B（蓝色）可以是<integer>s或<percentage>s，其中数字255对应于100％。a（α）可以是<number>0到1之间的a <percentage>，也可以是a ，其中数字1对应于100％（完全不透明）。

RGBa示例

rgba(51, 170, 51, .1)    /*  10% opaque green */ 

rgba(51, 170, 51, .4)    /*  40% opaque green */ 

rgba(51, 170, 51, .7)    /*  70% opaque green */ 

rgba(51, 170, 51,  1)    /* full opaque green */ 

一个显示如何使用的小示例rgba。

从2018年开始，几乎每个浏览器都支持rgba语法。

Answer 2

最简单的方法是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>

Answer 3

仅针对较少的用户：

如果您不喜欢使用RGBA设置颜色，而是使用十六进制设置颜色，那么有解决方案。

您可以使用mixin，例如：

.transparentBackgroundColorMixin(@alpha,@color) {

  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);

}

并像这样使用它：

.myClass {

    .transparentBackgroundColorMixin(0.6,#FFFFFF);

}

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

.myClass {

    background-color: fade(#FFFFFF, 50%);

}

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