CSS - 标题相对于图像的不透明度
假设我的 CSS 中有以下内容：
h1 {
font-family: Verdana;
font-size: 20pt;
color: Black;
z-index: 2;
opacity: 1.0;
}
#topFrame {
position: fixed;
top: 0;
left: 20%;
right: 20%;
height: 120px;
overflow: hidden;
border: 1px solid black;
background-image: url(dunno.jpg);
text-align: center;
vertical-align: center;
opacity: 0.5;
z-index: 1;
}
当我将 id 为“topFrame”的 div 放置在 HTML 中，然后尝试使用 h1 标记编写标头时，标头与图像一样不透明（因此它不是“突出”的黑色，而是显示为暗灰色，
有什么方法可以使 h1 在不透明度方面突出，同时仍然保持图像半透明，而不创建一个不可见的 div 。容纳标题（如果有意义的话）？
Say I have the following in my CSS:
h1 {
font-family: Verdana;
font-size: 20pt;
color: Black;
z-index: 2;
opacity: 1.0;
}
#topFrame {
position: fixed;
top: 0;
left: 20%;
right: 20%;
height: 120px;
overflow: hidden;
border: 1px solid black;
background-image: url(dunno.jpg);
text-align: center;
vertical-align: center;
opacity: 0.5;
z-index: 1;
}
When I place the div with id "topFrame" in the HTML and then try to write a header using h1 tags, the header is as opaque as the image (so rather than being "stand-out" black it shows up as a dull grey.
Is there any way I can make it so that the h1 stands out in terms of opacity whilst still keeping the image semi-opaque, without creating an invisible div to house the header (if that makes sense)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对此没有真正的解决方案。
如果父元素的不透明度为 0.5，则子元素将具有相同的不透明度。
防止这种情况的一种方法是将您的 h1 标记放置在 #topFrame 的顶部，并且您必须确保 h1 不是 #topFrame 的子级（
与此类似）。
There is no real solution for this.
If you have a parent element having an opacity of 0.5, the child will have the same opacity.
One way to prevent this is to position your h1 tag on top of your #topFrame, and you will have to make sure the h1 is not a child of #topFrame
Something similair to that.
CSS 不透明度会遗传给孩子。您可以使用透明的 PNG 作为 topFrame 的背景，您可以模仿父子关系，如下所示： http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children文章，否则我想你会不走运的。
CSS Opacity is inherited to children. You could use a transparent PNG for the background of topFrame, you could mimic a parent-child relationship as shown in this: http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children article or else you'll be out of luck, I think.