从这个问题，我能够让下面的代码工作。
然而，这并不完全是我想要的。我想让它早点消失。经过一番研究，它看起来gradient（和webkit-gradient）已被替换为linear-gradient. 我尝试使用它，但它似乎不适用于mask-image.
那么，如何使图像以特定的停止点淡出？例如，0 不透明度为 0%，0.25 不透明度为 75%，0.5 不透明度为 100%。（换句话说，直到图像向下 75% 处，您才会看到红色和蓝色条纹）
img {
position: absolute;
z-index: 5;
top: 0; left: 0;
-webkit-mask-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(
rgba(0,0,0,1)
), to(
rgba(0,0,0,0)
)
)
}
#bg1 {
position: absolute;
left: 0; width: 50px;
height: 360px;
background-color: red;
}
#bg2 {
position: absolute;
left: 50px; width: 50px;
height: 360px;
background-color: blue;
}<img src="http://www.gstatic.com/webp/gallery/1.jpg">
<div id="bg1"></div>
<div id="bg2"></div>linear-gradient() 会做
img {
position: absolute;
z-index: 5;
top: 0; left: 0;
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
}
#bg1 {
position: absolute;
left: 0; width: 50px;
height: 360px;
background-color: red;
}
#bg2 {
position: absolute;
left: 50px; width: 50px;
height: 360px;
background-color: blue;
}<img src="http://www.gstatic.com/webp/gallery/1.jpg">
<div id="bg1"></div>
<div id="bg2"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句