|
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> |