是否可以,仅使用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)
但这不会改变不透明度.
让我说我有
<div class="myDiv">Hi there</div>
Run Code Online (Sandbox Code Playgroud)
我想提出一个background-image并给它一个opacity的0.5-但我想,我写的文字将有充分的不透明度(1).
如果我像这样写CSS
.myDiv { opacity:0.5 }
Run Code Online (Sandbox Code Playgroud)
一切都将是低透明度 - 我不希望这样.
所以我的问题是 - 如何获得具有完全不透明度文本的低不透明度背景图像?