背景透明实现方法-CSS教程

2009年8月21日 发表评论 阅读评论

对于一些网页主题设计,有时候会涉及到CSS实现背景透明效果。而CSS实现背景透明,包括IEFirefox、Opera等主流浏览器,对于浏览器的多种多样,我们在进行背景透明设计时,也要不同的对待。这里说下如何在多个浏览器下实现背景透明。

一、首先说下CSS实现背景全透明

全透明比较好实现。在要实现透明功能的id或Class里,输入

{background:transparent;}

在IE、Firefox等浏览器下都有效果。

二、再来说下CSS实现背景半透明

可以实现自定义的透明程度,代码如下:

{
filter:alpha(opacity=80);            /* 用于IE浏览器-透明度为20%*/
-moz-opacity:0.8;                    /*  用于Moz + Firefox-透明度为20%*/
opacity: 0.8;                        /* 用于支持CSS3的浏览器-透明度为20%*/
}

下面举个具体的例子来说明如何使用,这里采用两个层重叠的方法实现多个浏览器支持背景透明,建立两个文件,一个文件后缀名命名为.html的,一个文件后缀名命名为.css的,html调用css文件:
Html代码:

<div class="alpha1">
<div class="ap2">
 
背景为红色(#FF0000),透明度20%。</div>
<!--[if IE]><![if !IE]><![endif]-->
 
      <!--[if IE]><![endif]><![endif]--></div>

CSS代码

.alpha1,.alpha2{
    width:100%;
    height:auto;
    min-height:250px;/* 必需 */
    _height:250px;/* 必需 */
    overflow:hidden;
    background-color:#FF0000;/* 背景色 */
}
.alpha1{
    filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
    background-color:#FFFFFF;
    -moz-opacity:0.8; /* Firefox 透明度20%*/
    opacity: 0.8; /* 支持CSS3的浏览器 透明度20%*/
}
.ap2{
    position:absolute;
}

好了,这样添加css代码就可以在IE、Firefox、Opera等多个浏览器里实现背景透明

http://it.dengchao.org
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 背景透明实现方法-CSS教程
  1. 断峰狼 | #1
    2010年8月25日22:10

    写的很详细~支持一个~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.