Forum Moderators: not2easy
style="background-color:#FFFFFF; opacity:.70;filter: alpha(opacity=70); -moz-opacity: 0.7;"
I found a tutorial that says to put a <div id="container"> around the content I want to be opaque, but that doesnt work in Firefox. This is the css used for the DIV:
#container {
filter:alpha(opacity=150);
-moz-opacity:1.5;
opacity: 1.5;
}
Can anyone point me to a site or give me some insights as to how to overcome this? I have seen a lot of websites that do have opaque content and transparent backgrounds (myspace, etc..) but cant get it to work.
Thanks for any help.
Or may be use a transparent PNG as your background-image and don't touch the transparency of the container at all?
<body>
<div id="container">
<p>Now all contents of div are 50% transparent, including all text, backgrounds, and images</p>
<!-- Unfortunately, this div cannot have any children divs without all of them being transparent. You can set the transparency on #container's children to 0 (1.0 opacity), but it won't matter. This is the only curiosity to opacity rules, which are otherwise quite useful in application. -->
For example: take this test case:
<style>
body {
background: #03f;
}
div#transparent {
opacity: .5;
background: #060;
width: 200px;
padding: 10px;
position: absolute;
top: 35px;
z-index: 2;
}
div#not_transparent {
opacity: 1;
background: #fff;
}
</style>
</head>
<body>
<h2>Hello World</h2>
<div id="transparent">
<div id="not_transparent">
<h3>Hello World</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
This is a test case I developed to illustrate this problem.
Paste it into Firefox with a Strict DOCTYPE. Note the opacity of the div#not_transparent.
Thanks
Ok i gave up, and I used a Transparent PNG instead and it works just as good!
Is it OK in IE6?
[webmasterworld.com...]
