案例【CSS遮罩可视化编辑器】mask-image,边拖拽边看效果,直观易懂,图片合成,渐变背景蒙版

zcimg07月12日
0
0

所谓遮罩(mask-image),就是原始图片只显示遮罩图片非透明的部分,在PS中称为“蒙版”。类似于现实世界中一张A4卡纸剪了个洞,我们可以通过洞看卡纸后面的物体,这里卡纸相当于遮罩层,只不过洞是遮罩层不透明的部分,其他部分是遮罩层透明的部分,与我们想象中的正好相反。

上面提到的图片也可以是各种渐变背景色。

整个过程在众触应用平台进行,不用手写一行CSS代码。

遮罩图片的合成示意图

开启图片遮罩

使用茶壶作为遮罩图片

使用线性渐变背景色作为遮罩层

使用辐射渐变背景色作为遮罩层

使用圆锥渐变背景色作为遮罩层

等不及了,马上亲自动手试一试:https://css-learn.zc-app.cn/z/mask_image

访问哔哩哔哩观看详尽的教学视频:https://www.bilibili.com/video/BV1yN4y1g7nh?p=5

更多教学视频请移步哔哩哔哩空间:https://space.bilibili.com/475645807,里面不仅有各种前端可视化案例演示和讲解,还有多个完整功能的网站应用案例的开发过程演示和讲解。

投诉
收藏
点赞 0
评论 0
Make in ZC APP Platform