blend-difference-stacking.html 439 B

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