蒙版/遮罩mask

很简单的一个属性，并不是PS里面的那个蒙版

蒙版目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

需要png的透明度遮罩

-webkit-mask-image:url("png的图片，需背景透明")，和背景设置一样，可以设置多个png图为蒙版

我这里用的png图是一个小星星：

效果图：

哈哈哈，是不是很神奇呀，啦啦啦~

倒影-webkit-box-reflect

倒影目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

例如：-webkit-box-reflect：right/left/blow/above 10px url("图片路径")）；

第一个值：倒影方向
第二个值：倒影与本体之间的距离，为具体的数值
第三个值：可以是透明度的渐变，也可以是一个png透明的图片

这里给一个透明色渐变的例子：

-webkit-box-reflect:below 10px -webkit-repeating-linear-gradient(90deg,rgba(255,255,10,1),rgba(10,255,255,0.5));

效果图：

CSS3蒙版/遮罩、倒影相关推荐

ae如何把已有图片当做蒙版_AE遮罩教程，如何用AE创建文字蒙版遮罩
AE遮罩教程,如何用AE创建文字蒙版遮罩在AE中,不仅仅只是作为视频的后期软件,它还可以对图片和文字来进行编辑,下面小编来介绍的就是AE遮罩教程之如何用AE创建文字蒙版遮罩,大家可以一起来学习学习, ...
Android多页蒙版遮罩引导功能(源码+解析)
#Android多页蒙版遮罩引导功能(源码+解析) 需求:博主前段时间做的教育类型APP,需要引导用户(低龄化小朋友),播放器的播放,页面可以左右滑动,以及右上方进入答题卡入口(小朋友都是很聪明的,引 ...
pyqt5 随笔：对蒙版遮罩mask,setmask的理解
pyqt5 随笔:对蒙版遮罩mask,setmask的理解 1.理解 mask()和setmask()一般是在pyqt绘图时常见,而且在显示不规则图形时更是常见. 参考书籍上说: setMask()函 ...
2020.11.12--AE--效果滤镜-颜色校正、分形杂色、蒙版遮罩
效果滤镜-颜色校正颜色校正:调整图层颜色色阶色相饱和度亮度和对比度曲线分形杂色 1.新建合成,然后新建纯色,添加倒数的时间码效果,点击右键效果-文本-编号 2.在效果控件里调整下大小和位置 ...
CSS3实现遮罩层效果
CSS3实现遮罩层效果第一步.创建外层遮罩先写个大盒子 <div id="box"></div> 再把盒子设置为固定定位,top.right.botto ...
CSS3中制作倒影box-reflect
目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-imag ...
HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️
效果演示: GIF压缩太大.故显示图片查看吧代码目录: 主要代码实现: CSS样式: @charset "utf-8"; * {margin: 0;padding: 0;list ...
css3全屏遮罩层,css3 引导遮罩层
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素 ...
CSS3蒙版 Mask
之前mask这个属性用的比较少,对它也并不了解,又一次在前端群里面五一看到人打了一个这样的属性出来,我感觉很陌生,马上去看了,原来真的有这么神奇的属性,蒙版,可以实现很多复杂多样化的遮罩. 语法: - ...

CSS3蒙版/遮罩、倒影

蒙版/遮罩mask

倒影-webkit-box-reflect

CSS3蒙版/遮罩、倒影相关推荐

最新文章

热门文章