CSS - Opacity of header against image

Question

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)?

Answer 1

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.

Answer 2

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.