css 图片底部渐变透明

使用elementui 要求el-image组件的图片都在底部有一定的渐变透明效果,类似下图

 主要用到了mask-image和渐变linear-gradient

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

mask-size 是一种实验技术

指定掩码图像的大小。为了保持图像的固有比率，可以完全或部分地限制图像的大小。

参考链接

https://cloud.tencent.com/developer/section/1072184

具体代码

  -webkit-mask-image: linear-gradient(to top, transparent, black 30px);
  mask-image: linear-gradient(to top, transparent, black 30px);
  mask-size: cover;
  -webkit-mask-size: cover;