Transparantie is iets wat moeilijk ligt, nog steeds, tegenwoordig, door de gebrekkige ondersteuning van IE6, maar met volgende methode kan je transparantie in kolommen verkrijgen met een kleine IE6 hack in je CSS, je kan het natuurlijk beter in een conditionele comment gieten:

Download afbeelding

Download volgende afbeelding:

HTML

<div id="wrapper">
<div class="container" id="column-1">
<div class="overlay"><!-- --></div>
<div class="content">
<h1>A demonstration of cross-browser transparent columns</h1>
<p>A demonstration of how to implement cross-browser transparent columns. It's used by having combination a transparent <code>div</code> with the same height as it's parent and a <code>div</code> containing the content. Then we pull the overlay <code>div</code> to the left and set the content <code>div</code> to <code>position: relative;</code> to fix the z-index. Check the source for more info.</p>
<p>Since IE6 lack support for absolutely positioned elements with both <code>top</code> and <code>bottom</code> (this is true for <code>right</code> and <code>left</code> as well) we have to compensate for this using proprietary CSS expressions. Voilá!</p>
<h2>Browsers</h2>
<p>Tested with and works in Firefox 3.x (Windows, Solaris & OSX), Safari 3 (Windows & OSX), Opera 9 & 10 (Windows), IE6 and IE7.</p>
<h2>Quirks to have in mind</h2>
<p>You must to set the width of the parent columns for this to work properly. Each column needs it's own ID and it's own IE6-rule for the <code>expression: ()</code>. It also won't work in IE6 without javascript, which is a minor issue since it degrades gracefully.</p>
</div>
</div>
<div class="container" id="column-2">
<div class="overlay"><!-- --></div>
<div class="content">
<h2>A sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at felis. Praesent vulputate, tortor vitae bibendum dignissim, risus enim congue lacus, tincidunt condimentum sem arcu eget dui. Nulla ligula. Etiam lobortis, dolor eget volutpat posuere, nisl metus fermentum velit, vitae egestas purus massa vestibulum dui. Donec eu ante. Suspendisse feugiat, ante ut pulvinar ultrices, nisi tellus lobortis felis, id dapibus neque lorem nec nisi. Aenean lorem lectus, consectetuer ac, ornare vel, eleifend tincidunt, nibh. Nullam auctor. Nulla facilisi. Suspendisse sed erat. Ut vitae sapien. Duis libero risus, ultrices eu, porttitor at, eleifend vitae, massa. Integer magna. Proin a diam. Curabitur congue.</p>
</div>
</div>
</div>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background: url(pattern.gif);
color: #fff;
width: 770px;
margin: 0 auto;
padding: 50px;
}
h1,h2 {
color: #77AFC7 !important;
margin-bottom: 0;
line-height: 1.2em;
}
p {
margin-top: 0;
}
a {
color: #aaa;
}
a:hover {
color: #FFF !important;
text-decoration: none;
}
code {
background-color: #100;
padding: 0.2em 0.5em;
display: inline-block;
}
#wrapper {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
}
.container {
position: relative;
float: left;
}
.content {
position: relative; /* Fixes the z-index */
float: left;
}
#column-1 {
width: 500px;
}
#column-2 {
width: 250px;
margin-left: 20px;
float: left;
display: inline;
}
#column-1 .content {
padding: 20px;
width: 460px;
}
#column-2 .content {
padding: 10px;
width: 230px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }
* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }