利用css控制透明背景png

透明图片一般采用png格式输出，而ie里面背景用png却没有了透明的效果，怎么办？原来ie有一个专有标签来控制

.sou {
 background: url(/images/search.png) no-repeat !important;
 background: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/search.png', sizingMethod='scale');
 height: 50px;
}

使用 PNG 文件的 Web 开发人员可以使用 AlphaImageLoader 筛选器  详细文档：http://support.microsoft.com/kb/294714/zh-cn

示例就是上面的红色样式

那个滤镜是ie专有，在firefox和opera下面无效，f至于firefox和opera，本身支持透明背景，只需要用background即可，为了消除在ie下也有background的问题，采用！important进行区分

ok  perfect ！

又出了一点问题，滤镜效果遮住了层里面的文字，如果有连接，或者按钮，你会发现鼠标点不进去了，换句话说这个层被滤镜遮住了。

<div class="sou"><div style="position:absolute;">
       <form method="post" name="searchEngineForm" onSubmit="return search()">
        &nbsp;<input type="text" value="输入您的关键词" name="keyEdit" size="25">
        <input type="submit" value="Bioon搜索" name="searchButton" class="anniu1"><br />
        <input type="checkbox" name="c0" value="ON" checked>站内
        <input type="checkbox" name="c1">产品
        <input type="checkbox" name="c2">供求
        <input type="checkbox" name="c3">招聘
        <input type="checkbox" name="c4">博客
        <input type="checkbox" name="c5" value="ON" checked>Google
       </form>
      </div></div>

解决办法：在里面再用一个div，position:absolute;表示这个层相对来说在他的上级div的前面。