Problem with opacity

[Geno312]

Hey all,

First of all, here's what I'm trying to do :
<snip>

Here's what I've done so far :

.menuTitle {
background:#A0410A;
font:bold 15px "Times New Roman", Times, serif;
color:white;
line-height:18px;
padding-left: 5px;
}
.menuCorner {
background-color: #669933;
margin:0 0 0 0;
width:25px;
height:18px;
float:right;
}
.menuColor {
 width:161px;
 background-color: #669933;
}
.menuImage {
background: transparent url("test.jpg") no-repeat bottom left;
background-size: 161px;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
<div class="menuColor">
<div class="menuTitle"><span class="menuCorner"></span>Title</div>
<div class="menuImage">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>

Any idea on how to do the opacity area like the image?

Thanks!

[edited by: Robin_reala at 7:31 pm (utc) on May 22, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[Robin_reala]

Hi Geno312, and welcome to WebmasterWorld

Opacity will adjust the translucency of the element and all of its contents - not what you want in this case. Ideally here we could use CSS3's rgba() background colour syntax which lets you specify a translucent colour. We'd put a rgba colour on .menuImage and the background image on .menuColor. Unfortunately only yet-unreleased versions of Safari and Firefox support this.

In the absence of rgba support we can fake the effect by tiling a alpha-translucent PNG over the top. Most images programs will let you create one easily enough. Just but your normal background image on .menuColor and tiles your new PNG on .menuImage. This works natively in everything apart from IEs less that IE7; there's a workaround for them though that generally works fine. Search for AlphaImageLoader or ask back here for more info.