我想要一张图片（作为背景图片）逐渐变得透明，这样就可以看到它后面的内容（由于透明度，可能只能模糊地看到）。
当然，我可以通过使用PNG图像来实现这个效果，但每次我想要改变起始=>终止透明度点时，我都需要向我的平面设计师提出更改图片的请求（也许我想要更多颜色或者我想要更少的颜色和更多的透明度）。
是否有任何机会我可以用CSS3实现同样的效果？我尝试在jpg（和png）上应用渐变到透明，但除非PNG已经具有透明度（和基本渐变），否则我无法看到它（这使CSS渐变变得无用）。
有什么建议吗？我正在努力搜寻网络，但似乎我没有使用正确的关键字，或者可能不可能实现。
更新1：
代码说得比很多话都要好，我想做这样的事情（但语法显然不对）：
background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 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,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>如果您只想将背景颜色（在此例中为白色）渐变为背景颜色，请查看此处的工作示例：
图像容器 div 的 .css 使用：
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 );
2021更新： 'mask-image'部分支持。在父元素(.image_preview_container)上设置遮罩图像(在本例中为线性渐变)。在此示例中，子元素(.image_preview)从50%开始逐渐淡出透明度。然后在100%处完全透明。(也可以使用其他长度，如'px')
在火狐浏览器中可以工作。可能在其他浏览器中也可以。到目前为止，这对我有用。如果在您的浏览器中无法正常工作，请发表评论。
CSS：
.image_preview_container {
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.image_preview {
background-image: url("IMAGE LOCATION");
}
HTML：
<div class="image_preview_container">
<div class="image_preview"></div>
</div>
.parent{
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.child{
background-image: url("splash_bottom3.png");
}
HTML:
<div class="parent">
<div class="child"></div>
</div>