W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> .redsquare { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask1"); /* 使用 SVG 遮罩 */ } .redsquare2 { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask2"); /* 使用 SVG 遮罩 */ } </style> </head> <body> <h1>mask-type 属性</h1> <h3>将 SVG 遮罩元素视为 Alpha 遮罩：</h3> <div class="redsquare"></div> <h3>将 SVG 遮罩元素视为亮度遮罩：</h3> <div class="redsquare2"></div> <svg width="200" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> </defs> </svg> </body> </html>