1. 使用图片遮罩
img { -webkit-mask-image: url(mask.png); mask-image: url(mask.png); }
2. 使用渐变遮罩
div { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }
以上代码将会使用渐变作为遮罩。这将会使元素在上方具有逐渐消失的效果。
3. 使用SVG图像作为遮罩
div { -webkit-mask-image: url(mask.svg); mask-image: url(mask.svg); }
以上代码将会使用SVG图像作为遮罩。这可以使遮罩和被遮罩的元素完全独立。
以上是一些mask属性的常见用法。它们可以帮助你创建出有趣的效果来改善你的设计方案。