0

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タグを使用してヘッダーを書き込もうとすると、ヘッダーは画像と同じくらい不透明になります（したがって、「目立つ」黒ではなく、鈍い灰色で表示されます。

ヘッダーを格納するための非表示のdivを作成せずに、画像を半透明に保ちながら、h1を不透明度の点で目立たせる方法はありますか（それが理にかなっている場合）？

4

2 に答える 2

0

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

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

Something similair to that.

于 2010-03-16T22:55:37.137 に答える
0

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.

于 2010-03-16T22:56:56.307 に答える