blend-difference-stacking.html 608 B

1234567891011121314151617181920212223242526272829
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/publicdomain/zero/1.0/
  4. -->
  5. <html>
  6. <style>
  7. #b {
  8. width: 200px;
  9. height: 200px;
  10. background-color: rgb(0,255,0);
  11. }
  12. #c {
  13. z-index: 1;
  14. position: absolute;
  15. top:100px;
  16. }
  17. </style>
  18. <div id="b">
  19. <svg width="100" height="100" viewBox="0 0 100 100" >
  20. <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
  21. </svg>
  22. <div id="c">
  23. <svg width="100" height="100" viewBox="0 0 100 100" >
  24. <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
  25. </svg>
  26. </div>
  27. </div>
  28. </html>