css如何对图片遮盖分开 |小程序悬浮按钮css

/*定义遮罩图形*/
.mask-shape {
-webkit-mask-image: url('shape.png');
mask-image: url('shape.png');
}
/*定义遮罩的颜色*/
.mask-color {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
/*定义遮罩的混合模式*/
.mask-blend {
-webkit-mask-image: url('shape.png');
-webkit-mask-composite: destination-out;
mask-image: url('shape.png');
mask-composite: exclude;
}

在上面的代码中，大家定义了三种不同的遮罩效果：经过图形遮罩（mask-shape）、颜色渐变遮罩（mask-color）和混合模式遮罩（mask-blend）。

在实际应用中，可以将两种不同的遮罩效果叠加在一起，以实现更加复杂的效果。比如，将颜色渐变遮罩和图形遮罩结合起来，可以创造出类似半透明的效果。