clip-path-mix-blend-mode-1.html (1154B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: clip-path with mix-blend-mode</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-clip-path"> 9 <link rel="match" href="clip-path-mix-blend-mode-1-ref.html"> 10 <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not."> 11 <style> 12 div { 13 position: absolute; 14 width: 100px; 15 height: 100px; 16 } 17 18 div.foreground { 19 background-color: rgb(255,0,255); 20 clip-path: url(#top_left); 21 z-index: 100; 22 mix-blend-mode: multiply; 23 } 24 25 div.background { 26 background-color: rgb(0,255,255); 27 } 28 </style> 29 </head> 30 <body> 31 <div class="foreground"></div> 32 <div class="background"></div> 33 <svg height="0" width="0"> 34 <defs> 35 <clipPath id="top_left"> 36 <rect x="0" y="0" width="50" height="50"/> 37 </clipPath> 38 </defs> 39 </svg> 40 </body> 41 </html>