遮罩的规则是：遮罩的 alpha 通道决定可见度——不透明的地方显示元素，透明的地方隐藏，半透明的地方对应半透明。用它来做「图片渐隐到背景」「按钮高光扫过」比切图优雅得多。
linear-gradient 配合 mask 可以把图片底部淡出融入页面；配合 keyframes 做一个从左到右移动的白色渐变扫光，就是常见的闪光按钮效果。记得同时写 -webkit-mask 兼容前缀。
<style> .fade { width: 200px; height: 120px; background: url('https://picsum.photos/400/240') center/cover; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } </style> <div class="fade">图片底部渐隐融入背景</div>