background-blending-background-attachement-fixed-scroll.html 753 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!-- Blend two background images having background-attachment: fixed and scroll respectively -->
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <style>
  6. #parent {
  7. width: 200px;
  8. height: 200px;
  9. overflow: hidden;
  10. }
  11. #child {
  12. background: url('as-image/green100x100.png'), url('as-image/green100x100.png');
  13. background-attachment: fixed, scroll;
  14. background-size: 100px 100px, 200px 200px;
  15. background-repeat: no-repeat no-repeat;
  16. background-blend-mode: difference;
  17. height: 400px;
  18. }
  19. body {
  20. margin: 0px;
  21. }
  22. </style>
  23. <script>
  24. function onLoad() {
  25. var parent = document.getElementById("parent");
  26. parent.scrollTop = 100;
  27. }
  28. </script>
  29. </head>
  30. <body onload="onLoad()">
  31. <div id="parent">
  32. <div id="child">
  33. </div>
  34. </div>
  35. </body>
  36. </html>