div{mask-image:url('path/to/mask-image.png');mask-mode:alpha;/* 默认值 */mask-repeat:repeat;/* 默认值 */mask-position:0%0%;/* 默认值 */mask-clip:border-box;/* 默认值 */mask-origin:padding-box;/* 默认值 */mask-size:autoauto;/* 默认值 */mask-composite:add;/* 默认值 */}...
-webkit-mask-composite: source-in;/*只显示重合的地方,等同于 intersect*/ -webkit-mask-composite: source-out;/*只显示上方遮罩,重合的地方不显示,等同于subtract*/ -webkit-mask-composite: source-atop;/*只显示下方遮罩*/ -webkit-mask-composite: destination-over;/*正常叠加*/ -webkit-mask-composite:...
background: url(image.png); mask: linear-gradient(135deg, transparent 15px, #fff 0) top left, linear-gradient(-135deg, transparent 15px, #fff 0) top right, linear-gradient(-45deg, transparent 15px, #fff 0) bottom right, linear-gradient(45deg, transparent 15px...
-webkit-mask-composite:clear;/*清除,不显示任何遮罩*/-webkit-mask-composite:copy;/*只显示上方遮罩,不显示下方遮罩*/-webkit-mask-composite:source-over;/*默认值,正常的叠加,等同于 add */-webkit-mask-composite:source-in;/*只显示重合的地方,等同于 intersect*/-webkit-mask-composite:source-out;/*只...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常
这和CSS mask中的mask-composite是一一对应的 /* Keyword values */ mask-composite: add; /* 叠加(默认) */ mask-composite: subtract; /* 减去,排除掉上层的区域 */ mask-composite: intersect; /* 相交,只显示重合的地方 */ mask-composite: exclude; /* 排除,只显示不重合的地方 */ ...
应用了 mask 之后,就会变成这样: 这个 DEMO,可以先简单了解到 mask 的基本用法。 这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明。 值得注意的是,上面的渐变使用的是 linear-gradient(90deg, transparent, #fff),这里的...
CSS mask 是一个简写属性,它在特定位置遮盖并显示图像,以部分或完全隐藏元素。 此属性是以下 CSS 属性的简写: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size 可能的值 none - 该值消除屏蔽效果。 <mask-reference> - 设置蒙版的图像源。请参阅mask-image。
mask:linear-gradient(90deg, transparent, #fff); } 应用了 mask 之后,就会变成这样: 这个DEMO,可以先简单了解到 mask 的基本用法。 这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明。 值得注意的是,上面的渐变使用的是linear-gradient(90deg, transparent, #fff...
这里得到了使用 mask 最重要结论:图片与 mask 生成的渐变的 transparent 的重叠部分,将会变得透明。 值得注意的是,上面的渐变使用的是 linear-gradient(90deg, transparent, #fff),这里的 #fff 纯色部分其实换成任意颜色都可以,不影响效果。