css遮罩

简介

1 .有一张原始图片，在他之上加遮罩。最后效果就是原始图片只会显示遮罩图片非透明的地方。图层的关系

截屏2022-02-08 下午3.06.26.png

2 .如图所示，span原来的颜色是黑色的，添加遮罩之后，只透出遮罩的颜色,遮罩图片的非透明部分，没有被显示出来，注意这个本来全部都是黑色的

mask-image 遮罩图片的支持格式

0 .指使用的图片资源.默认值是none。也就是没有遮罩图片
1 .svg类型.上面那个鑫字，每一个都是单独的类型
2 .可以是jpg,png，也可以是动态生成的图片，比如css渐变绘制的图片.jpg一般不作为遮罩图片，因为他不是绝对透明的
3 .渐变作为遮罩图片:渐变可以是任意类型的CSS3渐变，例如可以是linear-gradient()线性渐变，也可以是repeating-linear-gradient()重复线性渐变，也可以是radial-gradient()径向渐变，也可以是repeating-radial-gradient()重复径向渐变，也可以是conic-gradient锥形渐变（只要浏览器支持）

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
    mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
}

image.png

image-set

1 .可以根据不同设备的屏幕密度或者分辨率显示不同的背景图片，background-image或者mask-image

截屏2022-02-08 下午3.37.01.png

2 .果屏幕是一倍屏，也就是设备像素比是1的话，就使用zxx.png作为背景图片；如果屏幕是2倍屏及其以上，则使用zxx-2x.png这张图作为背景图；如果设备的分辨率大于600dpi，则使用zxx-print.png作为背景图
3 .1x，2x这里的x其实是dppx的别称，表示每像素单位的点数，也可以理解为屏幕密度
4 .渐进增强就好了。再使用image-set()语句之前加一行传统的background: url()语句就好了，兜底，这样就算浏览器不支持image-set()，我们的界面样式依然良好

mask-mode

1 .默认值：match-source.根据资源的类型自动采用合适的遮罩模式
2 .alpha:基于透明度
3 .luminance:基于亮度

mask-reapeat:属性详情介绍

1 .repeat-x:只有水平x平铺
2 .repeat-y:只有水平y平铺
3 .no-repeat:不会平铺，只有一个遮罩孤零零的挂在中间
4 .space:遮罩图片竟可能平铺不会发生任何裁剪
5 .round:遮罩图片尽可能靠在一起没有任何间隙。同时不发生任何裁剪。图片会有比例的缩放.这里要注意这个靠在一起.

mask-position

1 .默认值：0% 0%.默认在左上角
2 .支持关键字：top,bottom,left,right,center
3 .支持各种数值：30%，10px。

截屏2022-02-08 下午4.04.01.png

mask-size

1 .控制遮罩图片的尺寸
2 .默认值auto
3 .关键字：cover:保持图片的横纵比，并将图像缩放成完全覆盖背景定位区域的最小大小
4 .关键字：contain:会保持图像的横纵比并将图像缩放成适合背景定位区域的最大大小
5 .数字：length。第一个是图片的高度，第二个值是图片的宽度

mask-type

1 .设置不同的遮罩模式，这个属性只能用在svg元素上
2 .默认是luminance，亮度遮罩模式

mask-composite

1 .表示当使用多个图片进行遮罩的时候的混合模式
2 .chrome中
3 .source-cover:默认混合方式，直接在原有的图片上绘制，就是叠加
4 .souce-in：新图片和原图片重叠的地方显示遮罩，别的地方按透明处理。新内容是显示层，原内容是遮罩层，原内容无论是什么样，都不会显示

image.png image.png
image.png

5 .source-out：重叠位置是透明的，不重叠或者半透明的重叠区域反而显示新图形。原内容无论什么样，都不会显示

6 .source-atop:和source-in的区别是，会保留原图
7 .剩下的在这里；https://www.canvasapi.cn/CanvasRenderingContext2D/globalCompositeOperation#&others