由于text不可见，我正在应用opacity来减轻我的background-color。有什么方法可以提高能见度吗？
.abc{
width:200px;
height:200px;
border:1px solid red;
background: #211E1C;
opacity: 0.03;
color:green
}
这是我的代码
https://jsbin.com/tihowuveda/2/edit?html，css，js，输出
在上面的例子中，ansn文本不可见是为什么？
不透明度应用于整个元素，因此其中的任何内容都将具有该不透明度。可以使用rgba设置背景颜色的不透明度。
.abc, .foo{
display: inline-block;
width:200px;
height:200px;
border:1px solid red;
background: #211E1C;
color:green
}
.abc {
opacity: 0.03;
}
.foo {
background-color: rgba(33, 30, 28, 0.03);
}<div class="abc">Hello World</div>
<div class="foo">Hello World</div>它正在按预期工作。非常低的不透明度意味着它几乎不可见或几乎不可见。
尝试设置0.3或其他值。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
当你将不透明度应用于任何东西时，你也将其应用于所有的子元素https://www.w3schools.com/css/css_image_transparency.asp
opacity: 0.03几乎是opacity: 0。这就是为什么你的文本被隐藏的原因。
请使用rgba制作背景值
.abc{
width:200px;
height:200px;
border:1px solid red;
background: rgba(33, 30, 28, 0.03);
color:green
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
ansn
</div>
</body>
</html>