新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
实现图片的透明度渐变效果，效果如下：
先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样，看上去就是一个图片从右到左渐渐变得透明的效果。
这是我比较粗暴的方法，后来在网上看到一种更加优雅的方式：
大体上差不多，重点是 CSS 的 background-image 属性可以设置多张图片，用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。
CSS实现文字透明效果可以使用Opacity 属性即可满足。
CSS opacity 属性相关介绍和案例：
浏览器支持：所有浏览器都支持 opacity 属性。
定义和用法
A、opacity 属性设置元素的不透明级别。
B、默认值：1。
C、继承性：no。
D、版本：CSS3。
E、JavaScript 语法：object.style.opacity=0.5。
语法：opacity: value|inherit。
A、value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
B、应该从父元素继承 opacity 属性的值。
实例：设置 div 元素的不透明级别。
div{opacity:0.5} //透明度为0.5，半透明。注释：
A、IE8 以及更早的版本支持替代的 filter 属性。例如filter:Alpha(opacity=50)。
