实现图片的透明度渐变效果，效果如下：
先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样，看上去就是一个图片从右到左渐渐变得透明的效果。
这是我比较粗暴的方法，后来在网上看到一种更加优雅的方式：
大体上差不多，重点是 CSS 的 background-image 属性可以设置多张图片，用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。
可以设置啊，如图：
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确Action:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆</title> <style type="text/css"> body{ background-image:url(images/bird.jpg) background-repeat: no-repeat background-size:100% } .login_box::before{ content:"" /*-webkit-filter: opacity(50%) filter: opacity(50%)*/ background-image:url(images/love.jpg) opacity:0.5//透明度设置 z-index:-1 background-size:500px 300px width:500px height:300px position:absolute //一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层 top:0px left:0px border-radius:40px } .login_box{ position:fixed left:50% top:200px width:500px height:300px margin-left:-250px border-radius:40px box-shadow: 10px 10px 5px #888 border:1px solid #666 text-align:center } form{ display:inline-block margin-top:100px } input{ display:block width:250px height:30px background-color: #888 border:1px solid #fee outline:none border-radius:10px } input[type="submit"]{ width:100px height:30x margin-left: 70px background-color: #ccc } span{ color:red font-size:15px } </style> </head> <body> <div class="login_box">... ...
