css_透明技术

 透明技术

实现透明常用的两种方式有：

opacity:x，x 的取值从 0 到 1，如opacity: 0.8

rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

 

设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。

在background-color中使用rgba，标准浏览器中，背景透明，文字不透明。

注：opacity需要在ie8以上版本才有效，为了兼容，可用如下代码：

opacity:0.9;filter:alpha(opacity=90); 

 

实例1：

    当鼠标放到图片上时图片上面多一层灰灰的感觉，给用户一种选中的反馈，配合手型光标使用：

<div class="opacity">

<img src="http://img0.bdstatic.com/img/image/2043d07892fc42f2350bebb36c4b72ce1409212020.jpg" width="228" height="304" alt="美女"/>

</div>

.opacity:hover{

opacity:0.9;/*图片透明*/

cursor:pointer;/*手型光标*/

}

结果：

 

实例2：

在上面的基础上，添加一个文字描述（半透明状）：

<div class="opacity">

<img src="http://XXX020.jpg" width="228" height="304" alt="美女"/>

<span class="fanbb">范冰冰</span>

</div>

.opacity{

width:228px;

height:304px;

background:#999;

margin:100px auto;

position:relative;

}

.opacity .fanbb{

/*文字水平居中*/

text-align:center;

/*背景颜色*/

background:#000;

color:#fff;

font-weight:500;

font-size:18px;

padding:1px 10px;

/*边框为圆形*/

border-radius:15px;

position:absolute;

bottom:12px;

left:15px;

/*文字不受影响，只有背景透明*/

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

}

效果：