Home / Blog / it

视觉上的透明效果

Author: Vic.Wang 2014/05/24 Tags:cssopacitytransparentrgbaattribute

透明[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
     杨絮随风舞

     杨絮随风舞

     杨絮随风舞

     杨絮随风舞
                    

我们需要的只是黑色的背景透明,文字是不需要透明的,但浏览器自作主张的给透明了,这不是我们要的效果。解决这个问题,传统的办法是弄两个层,一个背景层,一个文本层,两层是同辈关系,让背景层透明,然后文本层定位到背景层上。传统的方法是很繁琐的,需要多写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代码:

        
落雪仙居神难绘
落雪仙居神难绘

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代码:

        
桃李争春尚不言

桃李争春尚不言

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还是一如既往的不支持。

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