Mashupdesign Blog : Web Design, Coding, and UI/UX

Cross-browser semi-transparent backgrounds

css code

.trans_box2 {<br />
font-family:verdana;<br />
font-weight:bold;<br />
padding:40px;<br />
margin:30px;<br />
border:solid 1px #555;<br />
/* Mozilla ignores crazy MS image filters, so it will skip the following */<br />
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’/75p_honey.png’);<br />
}<br />
/* IE ignores styles with [attributes], so it will skip the following. */<br />
.trans_box2[class] {<br />
background-image:url(/75p_honey.png);&#160;

html code

<div style=”float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px;” mce_style=”float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px;”>
<div class=”trans_box1″ style=”float:left;” mce_style=”float:left;”>
I like flowers.
</div>
<div class=”trans_box1″ style=”float:left;” mce_style=”float:left;”>
They smell nice.
</div>
<div class=”trans_box2″ style=”float:left;” mce_style=”float:left;”>
<a href=”http://www.google.com/search?q=flowers+bees+honey” mce_href=”http://www.google.com/search?q=flowers+bees+honey”&gt;When combined with bees, they make honey…></a>
</div>
<p>