在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码
01新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
02代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
03下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
04代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
1.css3新增的一个属性rgba,语法
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
2.设置透明度是不会被继承的，所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5)边框：border:5px solid rgba(0,0,0,0.5)或者背景都可以。
3.兼容性。支持ie9及以上的浏览器
4.css2中opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就有心无力了。
5.二者区别opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚。但是rgba不存在这种问题。
6.比如做一个背景的透明度，那么
<style>.div{background:rgba(0,0,0,0.5)width:100pxheight:100pxcolor:red}
.div1{background:#000width:100pxheight:100pxcolor:rgba(255,255,255,0.5)}
</style>
<div class="div">
我是文字
</div>
<div class="div1">
我是变透明的文字
</div>
文字不会被影响的。
7.如果需要设置字体的透明度，可以对color的rgba属性进行设置。
怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。<div class="box"></div>
<style>
.box{width:300pxheight:200pxmargin:0 autoboxder:1px solid #cccbackground:#000filter:alpha(opacity:30)opacity:0.3 -moz-opacity:0.3-khtml-opacity: 0.3}
</style>
其中background:#000filter:alpha(opacity:30)opacity:0.3为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。
filter:alpha(opacity=30)这一个是针对IE浏览器
-moz-opacity:0.3你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。
-khtml-opacity: 0.3这是旧版本的Safari（1.×）当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。
