mask-image-element.html (1520B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 div { 6 background-color: blue; 7 position: absolute; 8 margin: 0px; 9 padding: 0px; 10 width: 100px; 11 height: 100px; 12 top: 10px; 13 } 14 15 div.auto { 16 left: 10px; 17 mask-mode: match-source; 18 mask-image: -moz-element(#blue-bg); 19 } 20 21 div.alpha { 22 left: 120px; 23 mask-mode: alpha; 24 mask-image: -moz-element(#blue-bg); 25 } 26 27 div.luminance1 { 28 left: 230px; 29 mask-mode: luminance; 30 mask-image: -moz-element(#blue-bg); 31 } 32 33 div.luminance2 { 34 left: 340px; 35 mask-mode: luminance; 36 mask-image: -moz-element(#red-bg); 37 } 38 39 div.luminance3 { 40 left: 450px; 41 mask-mode: luminance; 42 mask-image: -moz-element(#lime-bg); 43 } 44 </style> 45 </head> 46 <body> 47 <div class="auto"></div> 48 <div class="alpha"></div> 49 <div class="luminance1"></div> 50 <div class="luminance2"></div> 51 <div class="luminance3"></div> 52 53 <div style="overflow:hidden; height:0;"> 54 <div id="blue-bg" style="width:100px; height:100px; background-color: blue;"> </div> 55 </div> 56 <div style="overflow:hidden; height:0;"> 57 <div id="red-bg" style="width:100px; height:100px; background-color: red;"></div> 58 </div> 59 <div style="overflow:hidden; height:0;"> 60 <div id="lime-bg" style="width:100px; height:100px; background-color: lime;"></div> 61 </div> 62 </body> 63 </html>