指定渐变不透明度停止（蒙版图像）

Question

从开始，我能够使下面的代码正常工作。

然而，它并不完全像我想要的那样。我想让它早点消失。经过一些研究，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>

Answer 1

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>

指定渐变不透明度停止（蒙版图像）

Specify stops in gradient opacity (mask-image)

css

linear-gradients