简单的蒙版，将图像从实体变为透明

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

在上面的例子中，有一个元素以图像为背景。应用在图像上的蒙版（使用 CSS）使其看起来好像从左到右淡出。

通过使用从白色（在左侧）到透明（在右侧）作为掩模的 linear-gradient 来实现掩蔽。由于它是一个 alpha 蒙版，因此在蒙版是透明的情况下，图像会变得透明。

没有掩码的输出：

掩码输出：

注意： 如备注中所述，上述示例仅在与 -webkit 前缀一起使用时才适用于 Chrome，Safari 和 Opera。Firefox 中尚不支持此示例（使用 linear-gradient 作为掩码图像）。