css遮罩

2022-02-09 本文已影响0人 skoll

简介

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:遮罩图片尽可能靠在一起没有任何间隙。同时不发生任何裁剪。图片会有比例的缩放.这里要注意这个靠在一起.