CSS mask-image 属性介绍

简介

CSS mask-image 属性用于定义一个遮罩层，可以实现对元素的部分区域进行遮罩，从而调整元素的可见性和透明度。通常情况下，遮罩效果可以通过图片、线性渐变、径向渐变、重复图案等方式来实现。

语法

mask-image: none | <url> | <image> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> | inherit;

参数说明

• none：默认值，表示不使用遮罩层；
• ：表示使用一个图片链接作为遮罩层；
• ：表示使用一个图片值作为遮罩层；
• ：表示使用一个线性渐变作为遮罩层；
• ：表示使用一个径向渐变作为遮罩层；
• ：表示使用一个重复线性渐变作为遮罩层；
• ：表示使用一个重复径向渐变作为遮罩层；
• inherit：继承父元素的遮罩层属性。

示例

使用图片链接作为遮罩层

.mask {
  mask-image: url('mask.png');
}

使用图片值作为遮罩层

.mask {
  mask-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
          AAAFCAYAAACNbyblAAAAHElEQVQI12P4
          //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

使用线性渐变作为遮罩层

.mask {
  mask-image: linear-gradient(to bottom, transparent 20%, black 80%);
}

使用径向渐变作为遮罩层

.mask {
  mask-image: radial-gradient(circle at center, transparent 20%, black 80%);
}

使用重复渐变作为遮罩层

.mask {
  mask-image: repeating-linear-gradient(45deg, yellow, green 10%, yellow 20%);
}