CSS代码：

<br />
.test {<br />
    background:#000;<br />
    color:white;<br />
    width:200px;<br />
    position:absolute;<br />
    left:10px;<br />
    top:10px;<br />
    filter: Alpha(opacity=10); /* IE */<br />
    -moz-opacity:0.1;    /* FF 主要是为了兼容老版本的FF */<br />
    opacity:0.1;    /* FF */<br />
}<br />

如果想让层变成透明但不想让层里的内容变成透明的，可以用以下的方法(需要用到半透明的PNG图片)：
CSS代码：

<br />
#content {<br />
position: relative;<br />
width: 300px;<br />
line-height: 22px;<br />
height: 300px;<br />
background-color: transparent;<br />
background-image:url(img/bg.png);<br />
_background-image: none;<br />
background-repeat:repeat;<br />
}<br />
#content #content-bg {<br />
_background-color: #FFFFFF;<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
left: 0px;<br />
top: 0px;<br />
z-index: -10;<br />
filter: Alpha(opacity=60);<br />
}<br />

HTML代码：

<br />
&lt;div id=&quot;content&quot;&gt;<br />
&lt;div id=&quot;content-bg&quot;&gt;&lt;/div&gt;<br />

网页背景是一张固定图片，其上的方框是半透明的，方框里的内容不是半透明，但内容之外的空白都是半透明可以将底部的图片渐显出来。
</div>

这个方法经测试在IE6/7、FF2、Opera9、Safari3.1下可以正常显示，别的浏览器因为条件原因没有测试，有兴趣的朋友可以测试一下。

原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

<br />
#wrap{<br />
 overflow: hidden;<br />
 }</p>
<p>#sideleft, #sideright{<br />
 padding-bottom: 32767px;<br />
 margin-bottom: -32767px;<br />
 }<br />

实现原理：

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom（足够大的值）到列的块元素 。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。 Read More…