mask-image-2.html (1120B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-image: mask layer image</title> 6 <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> 9 <link rel="match" href="mask-image-2-ref.html"> 10 <meta name="fuzzy" content="maxDifference=0-3; totalPixels=0-14000"> 11 <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not."> 12 <style type="text/css"> 13 div { 14 background-color: purple; 15 width: 100px; 16 height: 100px; 17 } 18 19 div.mask-by-gradient-1 { 20 mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */ 21 } 22 23 div.mask-by-gradient-2 { 24 mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */ 25 } 26 </style> 27 </head> 28 <body> 29 <div class="mask-by-gradient-1"></div> 30 <div class="mask-by-gradient-2"></div> 31 </body> 32 </html>