background-blending-background-attachement-fixed-scroll.html (753B)
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 12 #child { 13 background: url('as-image/green100x100.png'), url('as-image/green100x100.png'); 14 background-attachment: fixed, scroll; 15 background-size: 100px 100px, 200px 200px; 16 background-repeat: no-repeat no-repeat; 17 background-blend-mode: difference; 18 19 height: 400px; 20 } 21 22 body { 23 margin: 0px; 24 } 25 </style> 26 <script> 27 function onLoad() { 28 var parent = document.getElementById("parent"); 29 parent.scrollTop = 100; 30 } 31 </script> 32 </head> 33 34 <body onload="onLoad()"> 35 <div id="parent"> 36 <div id="child"> 37 </div> 38 </div> 39 </body> 40 </html>