filter:alpha(opacity=x) x值为0~100，值越小越透明， ie低版本支持filter:alpha(opacity=x)
background: rgba（）：也可以改变透明度，a的值为0~1，值为1时完全不透明
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
过渡属性（ transition-property ）：transition-property 过渡或动态模拟的CSS属性，property：指定的CSS属性（width、height、background-color属性等）all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
过渡所需的时间（ transition-duration ）：定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
过渡动画函数（ transition-timing-function ）：指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
transition-delay 过渡开始出现的延迟时间
练习：
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)
ease-out 规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)
ease-in-out 规定以慢速开始和结束的过渡效果
过渡延迟时间（ transition-delay ）正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 2s
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 速度会变快 -2s 会出现卡顿
0：默认值，元素过渡效果立即执行
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系，z-index值大的层位于其值小的层上方
总结：网页中的元素都含有两个堆叠层级，未设置绝对定位时所处的环境，z-index是0，设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定，改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。
1、创建一个html文件。
2、在html文件找到一个<body>标签，在这个标签里创建一个<div>标签并添加一个类，在这把这个类设置为：rgba。
代码：<div class="rgba"></div>
3、为div添加样式。在<title>标签后面创建一个<style>，在<style>标签里设置rgba类的高和背景透明度的样式（rgba(R,G,B,A)）。透明度参数，取值在0~1之间，不可为负值，透明度参数越小透明度越高。
代码：
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5)
height: 200px
}
</style>
4、保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。
5、所有代码。可以把所有代码复制到新建的html文件上，保存好后使用浏览器打开借口看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置背景透明</title>
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5)
height: 200px
}
</style>
</head>
<body>
<div class="rgba"></div>
</body>
</html>
在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码
新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
