TAG
CSS
Result
Run
License
<h3>Test in Firefox.</h3> <div class="source source1">luminance</div> <div class="source source2">alpha</div> <svg width="0" height="0"> <defs> <mask id="mask1"> <circle cx="50" cy="50" r="40" fill="red" fill-opacity="0.7" stroke-width="10" stroke="blue" stroke-opacity="0.9" /> </mask> <mask id="mask2"> <circle cx="50" cy="50" r="40" fill="red" fill-opacity="0.7" stroke-width="10" stroke="blue" stroke-opacity="0.9" /> </mask> </defs> </svg>
.source { height: 100px; width: 100px; background-color: #999; display: flex; justify-content: center; align-items: center; } .source1 { mask: url("#mask1"); } .source2 { mask: url("#mask2"); } #mask1 { mask-type: luminance; } #mask2 { mask-type: alpha; }
Console
expand_less
License
License
by DevDic
Close