前言

最近在浏览技术文章的时候，发现一个没有用过的CSS属性，刚开始以为很简单，但是当我深入了解后发现，这个属性很不简单，在这里记录一个学习的过程。

mask相关

截屏2022-04-30 下午9.58.51.png

使用mask相关的渐变属性配合animation属性可以做个图片转场动画，如上述例子所示，linear-gradient角度属性我们设置 45deg,颜色值我们设置#fff，第三个属性可以是px也可以是百分比，第四个是透明度我们设置百分比随着动画递增。

当然关于渐变属性有linear-gradient()线性渐变，repeating-linear-gradient()重复线性渐变，radial-gradient()径向渐变，repeating-radial-gradient()重复径向渐变，conic-gradient锥形渐变，锥形渐变浏览器的支持度不是太好。这里，大家根据自己样式的需要设置具体的属性进行使用

这里我们重点说下 mask-mode 这个属性，mask-mode属性默认值是match-source，他可以资源的类型自动采用合适的遮罩类型，mask-mode的值有三中类型

mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

alpha：透明度遮罩
luminance：基与亮度的遮罩

另外 mask-image 属性的url还支持svg格式的图片，但是这个目前只有在fixfox浏览器上支持。

.box {
    width: 400px;
    mask: url(#mask);
    mask-image: url(#mask);
    -webkit-mask-image: url(#mask);
}

mask-image 的属性值 cross-fade 还可以混合两张图片做遮罩，如

.box {
  width: 400px;
  mask-image: cross-fade(url(../img/33.png), url('../img/44.svg'), 90%);
  -webkit-mask-image: -webkit-cross-fade(url(../img/33.png), url('../img/44.svg'), 90%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

这个属性值用起来很是不错，配合不同的图片达到意向不到的效果

css属性mask使用实践(下)

前言

mask相关