CSS 像渐变一样将图像淡化为透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19713813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade image to transparent like a gradient
提问by Francesco Belladonna
I would like to have an image (a background image) to fade to transparent so that content behind it can actually be seen (barely, thanks to transparency).
我想要一个图像（背景图像）淡化为透明，以便实际上可以看到它背后的内容（几乎没有，多亏了透明度）。
I can achieve it obviously with a PNG image, but I need to ask to my graphic designer to change the image every time I want to change the start => stop transparency points (maybe I want more color or maybe I want less color and more transparency).
我显然可以使用 PNG 图像来实现它，但是每次我想更改开始 => 停止透明度点时，我都需要要求我的图形设计师更改图像（也许我想要更多的颜色，或者我想要更少的颜色等等透明度）。
Are there any chance I can achieve the same effect with CSS3? I tried applying a gradient to transparent on a jpg (and a png) but I can't see through it unless the PNG has already transparency (and basically the gradient) already done (which makes the css gradient useless).
我有机会用 CSS3 达到同样的效果吗？我尝试将渐变应用于 jpg（和 png）上的透明，但除非 PNG 已经透明（并且基本上是渐变）已经完成（这使得 css 渐变无用），否则我无法看透它。
Any suggestion? I'm digging hard through the web but seems like I'm not using the right keyword or maybe it's not possible.
有什么建议吗？我正在努力浏览网络，但似乎我没有使用正确的关键字，或者不可能。
Update 1:
更新 1：
Code says more than a lot of words, I would like to do something like this (but the syntax is obviously wrong):
代码说了很多，我想做这样的事情（但语法显然是错误的）：
background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));
回答by bishop
If you want this:
如果你想要这个：
You can do this:
你可以这样做：
<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,0,0,1)), to(rgba(0,0,0,0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,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='https://i.imgur.com/sLa5gg2.jpg' />
</body>
</html>回答by Rowe Morehouse
If you just want to fade to the background color (white, in this case) see the working example here:
如果您只想淡入背景颜色（在本例中为白色），请参阅此处的工作示例：
.css for the image container div uses:
.css 用于图像容器 div 使用：
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
