我想有一个图像(背景图像)淡化到透明度，以便实际上可以看到它后面的内容(几乎没有透明度)。
我可以用PNG图像显然实现它，但是我需要请求我的平面设计师改变图像，每次我想改变开始=>停止透明点(也许我想要更多的颜色，或者我想要更少的颜色和更多的透明度)。
有没有机会与CSS3达成同样的效果？我尝试在jpg(和png)上应用渐变透明度，但是我无法看到它，除非PNG已经有透明度(基本上是梯度)已经完成(这使得CSS渐变无用)。
任何建议？我正在通过网络挖掘，但似乎我没有使用正确的关键字，也可能是不可能的。
更新1：
background: linear-gradient(to bottom,rgba(url('splash_bottom3.png'),0.0),1.0));
解决方法
完全重写我以前的答案，因为我似乎完全误解了这个问题。
如果你想这样：
你可以这样做：
<html>
<style type='text/css'>
div,img { position:absolute; top:0; left:0; width:250px; height:250px; }
img {
-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,1)),to(rgba(0,0)))
}
</style>
<body>
<div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue,aliquet odio a,viverra metus. Ut cursus enim eu felis sollicitudin,vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum,porta libero sed,euismod tellus. Aenean erat augue,sodales sed gravida ac,imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie,vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
<img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
</body>
</html>
更新1
If you want to do this in other browsers,it won’t be as easy. Firefox需要一个SVG，IE需要一整天的工作。
