视觉上的透明效果

 

视觉上的透明效果

 

透明[tòu míng][transparency]，是物质透过光线的性质或情况。而在计算机中，指客观存在并且运行着但是我们看不到的特性。比如一个div标签就是透明的，我们看不见，但实实在在的存在于页面上。

在页面中没有全透明和不透明的效果存在，有的只是半透明，所以我们今天就说说CSS怎么实现半透明的效果。半透明效果在网页设计中是很常见的，尤其是在电商类、游戏专题类的网站用的更多，在页面中加入透明效果，不仅在视觉上给人以过渡效果，而且有一种细腻的柔美，用户的体验会很不错哦。

下面是一些常见的效果：

   

在CSS中要实现上面的效果，一般有以下几种方法。

一、opacity 属性

语法：opacity="1"

该值是一个number值，默认值1，取值范围是[0.0~1.0]之间，0完全透明，1不透明。

        opacity: 0.5;

        -webkit-opacity: 0.5;  //Chrome

        -moz-opacity: 0.5; //Firefox
                    

现代浏览器大部分已经支持opacity这个属性了，以后就没必要加上指定私有前缀咯。

属性值前面的前导零是可以省略的，0.5 =>.5

使用opacity这个属性会有一个问题，当父元素设置透明度后，子元素也会继承该透明度，你再对子元素设置透明度为1，也就是设置为不透明，它也不会生效的，但是你设置小于1的值，透明度会进行叠加，父元素的透明度 * 子元素的透明度 = 子元素最终的透明度。所以你子元素设置透明度，再怎么设置也不会超过1的。

• 杨絮随风舞opacity：1
• 杨絮随风舞opacity：0.5
• 杨絮随风舞opacity：0.25
• 杨絮随风舞opacity：0.25

     <strong class="opacity-05"><b class="opacity-1">杨絮随风舞</b></strong>

     <strong class="opacity-05"><b class="opacity-05">杨絮随风舞</b></strong>

     <strong class="opacity-05"><b class="opacity-025">杨絮随风舞</b></strong>

     <strong class="opacity-025"><b>杨絮随风舞</b></strong>
                    

我们需要的只是黑色的背景透明，文字是不需要透明的，但浏览器自作主张的给透明了，这不是我们要的效果。解决这个问题，传统的办法是弄两个层，一个背景层，一个文本层，两层是同辈关系，让背景层透明，然后文本层定位到背景层上。传统的方法是很繁琐的，需要多写HTML结构，结构稍微一动就需要改不少地方。

二、IE的私有滤镜

IE的私有滤镜比较多，也很混乱，就和IE本身一样，版本众多，兼容性差。

语法：filter:alpha(opacity=100);

这个值也是一个number值，取值范围是[0~100]之间，0完全透明，100不透明。

        filter:alpha(opacity=50); //IE6/IE7/IE8滤镜
                    

除了上面这种简洁的语法外，还有几种稍微复杂的语法，如下：

    filter: Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0,
                  FinishX=100, FinishY=100);

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); //IE6/IE7/IE8/IE9

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; //IE8/IE9
                    

IE的 filter 滤镜是要 ActiveX 运行的，禁用 ActiveX 的话，滤镜马上失效了。而且IE滤镜实现的效果是比较差，不怎么理想，在这种情况下，不建议使用滤镜，用优雅降级的策略更好。IE对滤镜的依赖是很占资源开销的，低版本的IE性能本来就差，还用这些占开销的东东，这不是逼着人家崩溃啊。效果一致性并没有那么重要，像IE就该区别对待，该放弃就得果断放弃。

其他的语法和属性值，自行Google。

三、CSS3的rgba模式

语法：rgba(R, G, B, A);

取值范围：

R：0~255 红

G：0~255 绿

B：0~255 蓝

A：Alpha透明度，取值0~1之间

        color: rgba(255,0,0,0.8);

        background: rgba(0,0,0,0.5);

        border-color: rgba(255,0,0,0.3);
                    

RGBA是种颜色模式，这种颜色模式和RGB是相同的，都是基于三基色（红绿蓝），所不同的是RGBA多了个参数，Alpha的透明度。透明度的取值在0和1之间，0是全透明，1是不透明。

个人非常喜欢这种模式，颜色中带点不透明，给人的感觉是很不错的。通过不同的透明度和颜色的组合，你会发现很多非常出色的搭配。这不是普通的256色的色板能比的。通过这种组合出来的颜色偏向于柔和、舒适，特别是0.4~0.6这几个透明度，非常适合用在现在流行的扁平化色块上。这种组合再配上个性字体，真真绝配。

mxue 凝雪 mxue 凝雪 mxue 凝雪mxue 凝雪 mxue 凝雪 mxue 凝雪mxue 凝雪 mxue 凝雪 mxue 凝雪Front-end. I love sue.

rgb的值是在0~255之间的，要是设置255以上，比如256、299，也不会出错，会强制为255。

rgb的值除了是数值外，还可以是百分比，浏览器在解析的时候会自动换成具体的数组。

兼容性：IE8以下是不支持的，对于这种情况，我们完全可以用优雅降级的策略来处理，美则美矣，不支持那就给个差点的效果咯，直接来个文本色吧，谁让你们这些老家伙跟不上潮流呢？对吧，要怪就怪 Microsoft 咯。

四、transparent 属性

        color: transparent; //文本色透明

        background: transparent; //背景色透明

        border-color: transparent; //边框色透明
                    

background-color 的默认值就是：transparent

将 border-color 的属性值设置为 transparent 时，IE6下会呈现黑色边线。

而将 color 设置为 transparent 时，IE6、IE7、IE8的文本色会变成黑色。

在CSS的发展中 transparent 首先是在CSS1中被用来作为 background-color 的一个参数，用来表示背景透明。从CSS2开始，这个值也被边框 border-color 接受，作为其参数值。在最新的CSS3中，这个值被延伸到任何一个有 color 值的属性上。

结论：这个属性还是用在背景里面比较多，因为在背景里面浏览器的支持度最好，连IE6都是支持的。用在边框上时，只有IE6不支持，而用在文本上时，兼容情况就变得很糟糕，IE8及以下都不支持，不过从语义方面来分析，这是对的，文字都透明了，那你还看什么？

说了这么多废话，下面我们写一下具体效果。

① 传统的方法：（背景透明，文本不透明）

HTML代码：

        <div class="overlay">
            <img src="images/img.jpg" alt="落雪仙居神难绘" title="落雪仙居神难绘">
            <div class="overlay-bg"></div>
            <div class="overlay-txt">落雪仙居神难绘</div>
        </div>
                    

CSS代码：

        .overlay{
            position: relative;
        }
        .overlay .overlay-bg{
            position: absolute; top: 0; left: 0;
            width: 200px; height: 125px;
            background: #000;
            opacity: .5;
        }
        .overlay .overlay-txt{
            position: absolute; top: 0; left: 0; z-index: 1;
            width: 200px; height: 125px; line-height: 125px;
            color: #fff;
            text-align: center;
        }
                    

效果如下：

 

落雪仙居神难绘

② RGBA的方法：

HTML代码：

        <div class="img-item">
            <img src="images/img.jpg" alt="桃李争春尚不言">
            <p>桃李争春尚不言</p>
        </div>
                    

CSS代码：

        .img-item{
            position: relative;
            width: 200px; height: 125px;
        }
        .img-item p{
            position: absolute; top: 0; left: 0;
            width: 200px; height: 125px; line-height: 125px;
            background: rgb(0,0,0)\0; //IE8
            filter: alpha(opacity=60)\0;
            *background: rgb(0,0,0); //IE7-IE6
            *filter: alpha(opacity=60);
            background: rgba(0,0,0,.6); //Chrome、FF、IE9+
            color: #fff;
            text-align: center;
        }
                    

效果如下：

桃李争春尚不言

方法1在IE6下还是黑的，不知道是不是我的IETester的原因。加了filter:alpha也是一样。你要是对细节很敏感，肯定会发现方法2会比方法1的透明深一点，而用了filter:alpha，透明会浅很多。

还有就是把半透明的效果存为支持透明图片的格式，PNG24、PNG32、GIF8等，但是IE6还是一如既往的不支持。

以上的几种方法各有利弊，看你怎么选择去用了。

本文地址：http://blog.mingsixue.com/it/css-opacity-transparent.html

文章若需转载，请附上原文链接，谢谢配合。^_^