主页
CSS 参考手册
CSS mask-type 属性
trycss3_mask-type
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> .redsquare { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask1"); } .redsquare2 { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask2"); } </style> </head> <body> <h1>The mask-type Property</h1> <h3>Let the SVG mask element be treated as an alpha mask:</h3> <div class="redsquare"></div> <h3>Let the SVG mask element be treated as a luminance mask:</h3> <div class="redsquare2"></div> <svg width="200" height="120" xmlns="https://w3org.cn/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>