Css 如何使我的第一个背景图像被遮罩图像覆盖？

我正在尝试收集一个非常简单的示例，演示如何使用CSS

掩码图像

值覆盖

背景图像

（但是覆盖其他内容也会起作用）。我没有足够的CSS经验将我的所有属性放置在正确的位置。到目前为止，我的理解是这是非常可能的

以下代码是我目前拥有的代码：

.one{
高度：600px；
宽度：100%；
遮罩图像：线性渐变（黑色、黑色）；
面具类型：阿尔法；
掩模模式：alpha；
}
#伊姆戈{
不透明度：0；
身高：50%；
宽度：100%；
背景图像：线性渐变（蓝色、蓝色）；
遮罩图像：线性渐变（黑色、黑色）；
面具类型：阿尔法；
掩模模式：alpha；
}
#imgtwo{
身高：50%；
宽度100%；
背景图像：线性梯度（黄色、黄色）；
遮罩图像：线性渐变（黑色、黑色）；
面具类型：阿尔法；
掩模模式：alpha；
}

内容

您对

遮罩图像的工作方式感到困惑

mask image
接受带有alpha掩码的图像（通常是svg，但png文件也可以），实际上它是按照alpha map的设置方式为div设置掩码

其中一个很好的例子是，他们将风景的背景修剪成“太阳”：


*{
框大小：边框框；
}
身体{
保证金：0；
背景：#8f7a66；
}
艾尔先生{
宽度：100vw；
高度：100vh；
填充：1rem；
背景图片：url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=熵&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ）；
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
掩码图像：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
掩模尺寸：100vmin；
面罩重复：不重复；
遮罩位置：中心；
}
你能再解释一下这里“重写”的意思吗？AFAIK掩码类型也适用于svgs.Hm。。我只想要一个黑色的盒子，而不是白色（空的）、蓝色或黄色的。我以为面具应该取代任何透明的东西（不透明度0）。你对面具的理解是不正确的。不透明度：0表示隐藏元素以及与该元素相关的所有内容，以便我们看不到内部发生的事情（遮罩、背景等）。不透明度和遮罩没有关系，它们是独立的。我想我读到它们在某个地方有联系。。但也许不是。我想我不太确定遮罩层的用途：（这很有帮助。但是，我仍然没有很好地创建我自己的示例。我尝试使用
wget
从示例中下载相同的文件，但是当我添加
mask image
时，所有内容都变白了。如果我保留原始URL，我可以修改示例。似乎文件类型对于遮罩层图像非常重要。可以吗使用CSS
渐变
类型可以获得类似的效果？或者您绝对需要正确的SVG/PNG文件吗？
蒙版图像
需要带有alpha蒙版的图像。您介意更详细地解释一下您想要实现的目标吗？