mask-opacity-1e.html (1127B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-image: mask with opacity</title> 6 <link rel="author" title="CJ Ku" href="mailto:cku@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-opacity-1-ref.html"> 10 <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> 11 <style type="text/css"> 12 #outter { 13 position: absolute; 14 left: 10px; 15 top: 10px; 16 width: 100px; 17 height: 100px; 18 mask-image: url(support/blue-100x50-transparent-100x50.png), 19 url(support/blue-100x50-transparent-100x50.png); 20 opacity: 0.5; 21 } 22 23 #inner { 24 width: 100px; 25 height: 100px; 26 box-sizing:border-box; 27 background-color: blue; 28 border: 1px solid transparent; 29 will-change: transform; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="outter"><div id="inner"></div></div> 35 </body> 36 </html>