mix-blend-mode-and-filter-ref.html (744B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE HTML> 6 <html> 7 <head> 8 <style> 9 .parent { 10 position: relative; 11 width: 100px; 12 height: 100px; 13 } 14 15 .child { 16 filter: blur(3px); 17 background: #0f0; 18 width: 100px; 19 height: 100px; 20 } 21 22 .black-rect { 23 position: absolute; 24 top: 50px; 25 width: 100px; 26 height: 50px; 27 background: #000; 28 } 29 </style> 30 </head> 31 <body> 32 <!-- 33 You should see a blurred green square, with its bottom half mostly 34 covered by a black rectangle. 35 --> 36 <div class="parent"> 37 <div class="child"></div> 38 <div class="black-rect"></div> 39 </div> 40 </body> 41 </html>