簡單的蒙版，將影象從實體變為透明

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 作為掩碼影象）。