Html 在图像上添加平滑梯度滤波器

我有一个背景图像，我想在上面添加两个渐变滤镜。。。 第一个滤镜是从右到左的蓝色滤镜，可以，但第二个滤镜是从上到下的黑色滤镜，一点也不平滑。 我希望我的代码生成以下内容： 但我的黑色过滤器毁了它

*{
框大小：边框框；
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
}
.着陆{
宽度：100vw；
高度：100vh；
位置：相对位置；
}
.landing.bg{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：url（'https://images.unsplash.com/photo-1448574271786-c15eea67e169?ixlib=rb-1.2.1&q=85&fm=jpg&crop=熵&cs=srgb&dl=sebastian-unrau-48222-unsplash.jpg'）中心顶部不重复；
背景大小：100%75%；
}
.landing.bg:：之前{
内容：''；
宽度：100%；
身高：75%；
位置：绝对位置；
背景图像：线性梯度（向右，rgb（0,50,150）0%，rgb（0,25,50）100%）；
不透明度：.2；
}
.landing.bg:：之后{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景图像：线性渐变（至底部，透明40%，rgb（20,20,20）60%）；
}

---

添加不透明度，并将背景从下到上的高度设置为从左到右的高度

*{
框大小：边框框；
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
}
.着陆{
宽度：100vw；
高度：100vh；
位置：相对位置；
}
.landing.bg{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：url（'https://images.unsplash.com/photo-1448574271786-c15eea67e169?ixlib=rb-1.2.1&q=85&fm=jpg&crop=熵&cs=srgb&dl=sebastian-unrau-48222-unsplash.jpg'）中心顶部不重复；
背景大小：100%75%；
}
.landing.bg:：之前{
内容：''；
宽度：100%；
身高：75%；
位置：绝对位置；
背景图像：线性梯度（向右，rgb（0,50,150）0%，rgb（0,25,50）100%）；
不透明度：.2；
}
.landing.bg:：之后{
内容：''；
宽度：100%；
身高：75%；
位置：绝对位置；
背景图像：线性渐变（至底部，透明40%，rgb（20,20,20）60%）；
不透明度：0.6；
}

文件
* {
框大小：边框框；
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
}
.着陆{
宽度：100vw；
高度：100vh；
位置：相对位置；
}
.landing.bg{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：url（'https://images.unsplash.com/photo-1448574271786-c15eea67e169?ixlib=rb-1.2.1&q=85&fm=jpg&crop=熵&cs=srgb&dl=sebastian-unrau-48222-unsplash.jpg'）中心顶部不重复；
背景大小：100%100%；
}
.landing.bg:：之前{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景图像：线性梯度（向右，rgb（0,50,150）0%，rgb（0,25,50）100%）；
不透明度：.2；
}
.landing.bg:：之后{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景图像：线性渐变（至底部，透明40%，rgb（20,20,20）60%）；
不透明度：0.2
}

您可以使用多个背景简化代码：

*{
框大小：边框框；
填充：0；
保证金：0；
}
html，
身体{
身高：100%；
}
.着陆{
高度：100vh；
背景：
线性梯度（至底部，透明40%，rgba（20,20,20,0.8）80%），
线性梯度（向右，rgba（0,50,150,0.2）0%，rgba（0,25,50,0.2）100%），
url（'https://images.unsplash.com/photo-1448574271786-c15eea67e169?ixlib=rb-1.2.1&q=85&fm=jpg&crop=熵&cs=srgb&dl=sebastian-unrau-48222-unsplash.jpg'）顶部；
背景大小：100%75%；
背景重复：无重复；
}

---

向第二个过滤器添加不透明度，就像第一个过滤器一样