1

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

     <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;
  }

面膜的正确使用方法是什么：

4

1 回答 1

0

要了解如何正确使用面具，您需要首先参考规范mask-mode中的详细说明

mask-mode 属性指示是否将<mask-reference>其视为亮度蒙版或 alpha 蒙版。（请参阅蒙版处理。）

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

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

如果<mask-reference>mask-image 属性是 type ，则应该使用<image> 掩码层图像的 alpha 值作为掩码值。

渐变是图像：https ://drafts.c​​sswg.org/css-images-3/#typedef-image

然后，如果您参考掩码处理，您将阅读：

计算掩码值的第一个也是最简单的方法是使用掩码图像的 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;
}
<img src="https://picsum.photos/id/1/300/200" >

或更改模式（仅适用于 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;
}
<img src="https://picsum.photos/id/1/300/200" >

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

于 2020-06-15T11:40:52.973 回答