Image opacity and translucency can now be controled using CSS. A quick study of the CSS reference at w3schools.com can demonstrate all you need to know to implement this in your webpage.
Examin the code below to see how translucency has been applied as the background of the .bg-trans class...
One of the features of this style sheet is that regardless of the user's screen size, it never gets a horizontal scroll bar. When a user resizes their browser window, the main content block expands and contracts, but the margin and background graphic move relative to the user's window. The margins and content container are controlled by using percentage values for width properties. In reality the margins are changing width, but compared to the content block, the adjustment is nearly inperceptable. Here's how the CSS was created:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 55px;
font-family: palatino, georgia, serif;
color: #333333;
background : #D3D3B5 url(img/image.gif) no-repeat fixed right bottom;
}
#foreground {
position:fixed;
left:30px;
top:25px;
width:303px;
height:33px;
z-index:3;
background-image:url(img/suzanne-g-alexander.gif);
}
div.bg-trans {
padding: 10px 20px;
margin-top:35px;
margin-bottom:35px;
margin-left:12%;
margin-right:12%;
border: 1px dotted #333;
/* FF2 & Opera Hack */
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9T
AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExUR
f///////1V89WwAAAACdFJOU/8A5bcwSgAAABZJREFUeNpiYGRAhQwMjATgsFYBEGAARRAAgUojx6MAAA
AASUVORK5CYII=);
/* Safari and FF3 support CSS3 syntax already */
background:rgba(255,255,255,0.3);
}
</style>
<!--[if IE]><style type="text/css">
/* For Your IEs Only */
div.bg-trans {
background-color:#ffffff;
filter:alpha(opacity=50);
zoom:1;
}
</style><![endif]-->
</head>
<body>
<div id="foreground"> </div>
<div class="bg-trans">
. . . content goes here.
</div>
</body>
</html>
The dotted-line role-over effect in this page was created with the following styles:
a, a:link, a:visited, a:active {
color: #284b64;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #3d6d8f;
text-decoration: none;
border-bottom: 1px dotted #CC6600;
}