是否可以,仅使用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父元素而言.
所以我有一个带有背景图像的不透明度的div.我希望悬停div时弹出的文本保持100%.有人可以帮我这个吗?任何帮助将不胜感激!
<body>
<div id="container">
<div id="container_inner">
<div id="container_txt">
<p><a href="#">WORLD OF WARCRAFT</a></p>
<p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
</div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)