当前位置:jQuery学习 > css > 操蛋的css透明度

操蛋的css透明度

时间:2014-05-26QQ群:116983258

在页面切图时,有时候会碰到某一个模块背景有一定的透明度,如果不是纯色的话,那就只能用png图片代替了,然后IE6使用滤镜来修复背景灰色bug;如果是纯色,那么css中opacity属性是个很好的选择,但IE8以及以下版本不支持,可以用滤镜filter:alpha(opacity=value)来实现的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    * { margin:0; padding:0;}
    body { padding:200px;}
    div { width:100px; height:100px; }
    .box { background-color:#333;}
    .wrap { margin:-50px 0 0 50px; line-height:100px; background-color:#ed7612; text-align:center; color:#000;opacity:0.5; filter:alpha(opacity=50);}
</style>
</head>

<body>
    <div class="box"></div>
    <div class="wrap">透明度</div>
</body>
</html>

效果图:

CSS透明

我们会看到已经有透明度效果了,但是发现一个问题,就是文字的颜色明显变淡了。原来opacity属性也会改变子元素的透明度,看来该方法不可行。仔细想一下,既然它会改变子元素的透明度,那么不用给其设置内容,仅仅作为背景,而里面的内容放到其他div中然后定位到相应的位置不就可以了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    * { margin:0; padding:0;}
    body { padding:200px;}
    .box, .wrap { width:100px; height:100px;}
    .box { background-color:#333;}
    .wrap { position:relative; margin:-50px 0 0 50px;}
    .bg, .con { width:100%; height:100%;}
    .bg { background-color:#ed7612; opacity:0.5; filter:alpha(opacity=50);}
    .con { position:absolute; top:0; left:0; line-height:100px; text-align:center;}
</style>
</head>

<body>
    <div class="box"></div>
    <div class="wrap">
        <div class="bg"></div>
        <div class="con">透明度</div>
    </div>
</body>
</html>

效果图:

css透明

ok,完美解决的上面的问题,但是就是看着多了一个无意义的标签,看着总让人不爽。当然这里还有一种方法来解决,就是利用rgba来实现,但它依然不支持IE8以及以下版本,还是利用滤镜来兼容IE:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=value,endColorstr=value)。startColorstr和endColorstr参数接收的值类型相同都是#AARRGGBB,其中的AA是代表不透明度的十六进制,它的值是要计算出来的就是:透明度(例如:0.5)乘以255得到的值再转换成十六进制,如果值为小数,那么向下取整。后面的RRGGBB一看就应该明白,就是色值的十六进制值,例如:000000。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    * { margin:0; padding:0;}
    body { padding:200px;}
    div { width:100px; height:100px; }
    .box { background-color:#333;}
    .wrap { margin:-50px 0 0 50px; line-height:100px; text-align:center; color:#000;}
    .wrap { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fed7612,endColorstr=#7fed7612); background:rgba(237, 118, 18, 0.5); background:transparent\;}
</style>
</head>

<body>
    <div class="box"></div>
    <div class="wrap">透明度</div>
</body>
</html>

效果图:

css透明

nice!这不仅解决了透明度问题,而且也不用使用无意义的标签。这里说明一下background:transparent\; 这的一定要写在最后面,如果你在它后面写样式的话,也会无效。

作者:杭州-阿牛
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/css-transparent.html

所有话题