淡出带有CSS / JS渐变的div

Question

我的意思不是淡入/淡出动画。我想知道是否有任何疯狂的未来派CSS属性，技术或JS插件来实现此效果：

谢谢！

Answer 1

对于整个内容，我认为最好的选择是将mask-image属性与CSS过渡一起使用：

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

是的，您可以使用以下属性设置对象：

background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0))

rgba中的第四个参数是不透明度，这将有助于在使用linear-gradient时产生这种褪色效果。