mask-image-element-ref.html (1759B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 div { 6 background-color: white; 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 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); 18 } 19 20 div.alpha { 21 left: 120px; 22 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); 23 } 24 25 div.luminance1 { 26 left: 230px; 27 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(238,238,255)" fill-opacity="1"/></svg>'); 28 } 29 30 div.luminance2 { 31 left: 340px; 32 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(201,201,255)" fill-opacity="1"/></svg>'); 33 } 34 35 div.luminance3 { 36 left: 450px; 37 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(73,73,255)" fill-opacity="1"/></svg>'); 38 } 39 </style> 40 </head> 41 <body> 42 <div class="auto"></div> 43 <div class="alpha"></div> 44 <div class="luminance1"></div> 45 <div class="luminance2"></div> 46 <div class="luminance3"></div> 47 </body> 48 </html>