Question

说我的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;
}

当我在HTML中放置ID为“topFrame”的div，然后尝试使用h1标记编写标题时，标题与图像一样不透明（因此不是“突出”黑色它显示为暗灰色。

有没有什么方法可以让h1在不透明度方面脱颖而出，同时仍然保持图像半透明，而不创建一个不可见的div来容纳标题（如果有意义的话）？

Answer 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% }

与此相似的东西。

Answer 2

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

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

2 个答案: