如何在图像中使用 CSS 蒙版？答案

【问题标题】：How to use a CSS mask with an image?如何在图像中使用 CSS 蒙版？
【发布时间】：2020-10-04 18:29:50
【问题描述】：

我正在尝试在图像上放置渐变蒙版，但它不起作用

     <div className="first-section">
     <img src={BgPic} alt="Bg-pic" className="bg-pic" />
     </div>

 .bg-pic{
     width:100%;

     mask-image:linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
  }

口罩的正确使用方法是什么：

【问题讨论】：

我只是用反应来说明我为什么要在范围内写作
您期待什么样的结果？您在蒙版内使用了两种不透明的颜色，所以什么都不会发生（将其中一种更改为透明并查看差异）
你是对的，谢谢

标签： css css-mask

【解决方案1】：

要了解如何正确使用掩码，您需要先参考mask-mode，详见the specification

mask-mode 属性指示<mask-reference> 是被视为亮度遮罩还是 alpha 遮罩。（请参阅蒙版处理。）

 <masking-mode> = alpha | luminance | match-source

默认值为match-source，当使用渐变时，您将拥有：

如果 mask-image 属性的 <mask-reference> 是 <image> 类型掩码层图像的 alpha 值应该用作掩码值。

^{渐变是图像：https://drafts.csswg.org/css-images-3/#typedef-image}

那么如果你提到the mask processing你会读到：

计算掩码值的第一个也是最简单的方法是使用掩码图像的 Alpha 通道。在这种情况下，给定点的掩码值只是该点的 Alpha 通道的值。 颜色通道不影响遮罩值。

所以使用你的渐变你将一无所有，因为你的颜色的 alpha 通道等于1

考虑透明（或半透明）颜色

img{
  -webkit-mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
          mask: linear-gradient(180deg, transparent 0%, #380A46 100%) 0% 0% no-repeat padding-box;
}

&lt;img src="https://picsum.photos/id/1/300/200" &gt;

或更改模式（仅适用于 Firefox）

img{
  -webkit-mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
          mask: linear-gradient(180deg, #000000 0%, #380A46 100%) 0% 0% no-repeat padding-box;
          mask-mode:luminance;
}

&lt;img src="https://picsum.photos/id/1/300/200" &gt;

请注意，我使用的是mask 而不是mask-image，因为您正在考虑其他值，例如mask-repeat、mask-position、mask-clip，所以这里需要的是速记属性。

【讨论】：