是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个单独元素的情况下实现此目的.
尝试时:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}Run Code Online (Sandbox Code Playgroud)
<p>
<span>Hello world</span>
</p>Run Code Online (Sandbox Code Playgroud)
看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.
我可以将opacity属性分配给仅background属性div而不是文本吗?
我试过了:
background: #CCC;
opacity: 0.6;
Run Code Online (Sandbox Code Playgroud)
但这不会改变不透明度.