CSS - 标题对图像的不透明度答案

【问题标题】：CSS - Opacity of header against imageCSS - 标题对图像的不透明度
【发布时间】：2011-01-28 08:38:05
【问题描述】：

假设我的 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 来容纳标题（如果有意义的话）？

【问题讨论】：

标签： css background-image opacity

【解决方案1】：

对此没有真正的解决方案。

如果您有一个不透明度为 0.5 的父元素，则子元素将具有相同的不透明度。

防止这种情况的一种方法是将您的 h1 标记放在 #topFrame 的顶部，并且您必须确保 h1 不是 #topFrame 的子项

h1{ font-family: Verdana; font-size: 20pt; color: Black; z-index: 2; opacity: 1.0; position: fixed; left: 20%; right: 20% }

类似的东西。

【讨论】：

【解决方案2】：

CSS Opacity 继承给子级。您可以使用透明 PNG 作为 topFrame 的背景，您可以模仿父子关系，如下所示：http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children 文章，否则我认为您将不走运。

【讨论】：