CSS - Opacity of header against image
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;
backgrou开发者_如何学Gond-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)?
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.
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.
精彩评论