已实现图片左侧CSS mask-image渐变遮罩，如何添加底部渐变遮罩？

你可以通过在mask-image中用逗号分隔多个渐变的方式，同时实现左侧和底部的淡出效果，CSS支持多个遮罩图层叠加生效。

直接修改代码如下：

mask-image: 
  linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 100%),
  linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, transparent 100%);
mask-mode: alpha;

代码说明： #

• 第一个渐变是你原本实现的左侧淡出：从右向左，前50%区域完全显示图片，50%到100%区域逐渐透明。
• 第二个渐变是新增的底部淡出：从顶部到底部，前70%区域完全显示图片，70%到100%区域逐渐透明。你可以根据需求调整这个百分比（比如改成80%让底部淡出更短）。
• mask-mode: alpha是确保用渐变的透明度作为遮罩规则，大部分浏览器默认已支持，但加上后兼容性更稳。

如果需要调整两个遮罩的叠加逻辑，还可以用mask-composite属性，但默认的叠加方式已经能让两个淡出效果同时生效——只有两个渐变都不透明的区域，图片才会正常显示。

内容的提问来源于stack exchange，提问作者hj.paul7