Here is a note for no transparent image in transparent box element.

<style type="text/css">
<!--
#imageFrame { background-color: rgba(255,255,255,0.7); filter: alpha(opacity=70); }
#imageFrame img { position: relative; }
-->
</div>

<div id="imageFrame">
<img src="example.jpg" />
</div>

"background-color: rgba(255,255,255,0.7);" is for FF3.x, Safari3.x, 4.x.

"filter: alpha(opacity=70)" and "position: relative" of img tag are for IE8.

And only IE6 and IE7 need "background-color: #FFF;" after "background-color: rgba(255,255,255,0.7);", so you have to detect useragent and write css by javascript.

function uacsssw() {
 if(navigator.userAgent.match(/MSIE 6/) || navigator.userAgent.match(/MSIE 7/)){
  document.write(
   '<style type="text/css">'+
   '<!--'+
   '#imageFrame { background-color: #FFF; }'+
   '-->'+
   '</style>'
  )
 }
 if(navigator.userAgent.match(/Firefox\/2/)){
  document.write(
   '<style type="text/css">'+
   '<!--'+
   '#imageFrame { background-color: #FFF; }'+
   '-->'+
   '</style>'
  )
 }
}

You have to insert this function after style definition.

Because FireFox2 can not overwrite transparent tag of outside box element on image object, I gave it up... Please let me know if you know any trick for FF2.