CSS mask遮罩之mask-image

2020-06-152121次阅读css模块

一般来说mask-image需要一张有透明部分的图片,该图片用于遮挡在指定的dom上,被图片透明部分遮住的部分将不被显示,被不透明部分遮住的部分将显示。有透明部分的图片也可以通过PS快速创建一个蒙版图片,几秒钟就可以搞定。png图片放到psd里–>画一个黑色的矩形覆盖png图–>在矩形图层上右键“创建剪贴蒙版”–>保存收工。

mask和background用法是相仿的,mask的值有这些

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

 

实现案例如下:

 

上一篇: CSS display:flow-root声明  下一篇: 如何在JavaScript中获取页面上的所有自定义属性  

CSS mask遮罩之mask-image相关文章