SwiftUI 如何实现图片从底部边缘渐变淡出的效果

推荐优先使用CSS mask 属性实现，无需额外叠加层，适配任意背景场景，实现代码如下：

.target-img {
  /* Webkit 内核浏览器兼容 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

如果需要兼容不支持mask属性的老旧浏览器，可以改用 overlay 伪元素方案，修正后的代码如下：

/* 图片父容器 */
.img-wrapper {
  position: relative;
}
/* 渐变遮罩 */
.img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, [你的页面背景色] 100%);
  pointer-events: none;
}

• 调整linear-gradient的色标位置即可控制渐变淡出的范围，例如linear-gradient(to bottom, #000 50%, transparent 100%)表示图片上半部分完全显示，下半部分开始渐变淡出
• 使用overlay方案时必须将渐变结束色设置为和图片所处区域的背景色完全一致，否则会出现明显的遮罩痕迹，这也是overlay方案常见的效果异常原因

你之前用overlay实现效果不符合预期大概率是渐变结束色和背景色不匹配，或者渐变方向写反导致的。

内容的提问来源于stack exchange，提问作者Just A Question