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)&nbsp; &nbsp; /*&nbsp; 10% opaque green */&nbsp;rgba(51, 170, 51, .4)&nbsp; &nbsp; /*&nbsp; 40% opaque green */&nbsp;rgba(51, 170, 51, .7)&nbsp; &nbsp; /*&nbsp; 70% opaque green */&nbsp;rgba(51, 170, 51,&nbsp; 1)&nbsp; &nbsp; /* full opaque green */&nbsp;一个显示如何使用的小示例rgba。从2018年开始，几乎每个浏览器都支持rgba语法。

Answer 2

最简单的方法是2个div，1个带有背景，1个带有文本：#container {&nbsp; position: relative;&nbsp; width: 300px;&nbsp; height: 200px;}#block {&nbsp; background: #CCC;&nbsp; filter: alpha(opacity=60);&nbsp; /* IE */&nbsp; -moz-opacity: 0.6;&nbsp; /* Mozilla */&nbsp; opacity: 0.6;&nbsp; /* CSS3 */&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;}#text {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height: 100%;}<div id="container">&nbsp; <div id="block"></div>&nbsp; <div id="text">Test</div></div>

Answer 3

仅针对较少的用户：如果您不喜欢使用RGBA设置颜色，而是使用十六进制设置颜色，那么有解决方案。您可以使用mixin，例如：.transparentBackgroundColorMixin(@alpha,@color) {&nbsp; background-color: rgba(red(@color), green(@color), blue(@color), @alpha);}并像这样使用它：.myClass {&nbsp; &nbsp; .transparentBackgroundColorMixin(0.6,#FFFFFF);}实际上，这也是内置的Less函数所提供的：.myClass {&nbsp; &nbsp; background-color: fade(#FFFFFF, 50%);}请参阅如何使用Less编译器将十六进制颜色转换为rgba？