Use background-Attachment: fixed for animation

Let's take a look at this demo.

Scroll up and down this demo page (IE6 can be used first), you can see that the picture has a switching animation effect, it feels quite advanced, but in fact the demo pageCodeIt is easy to put a few background images in several divs and set the background image to a fixed one.

Therefore, background-Attachment: fixed is really a magical thing. If you make good use of it, you can make amazing results. The following describes the background-attachment attribute in detail.

Descriptions of background-Attachment:

Background-Attachment-- Define how the background image is moved along with the scroll Element

• Value: Scroll | fixed | inherit
  • Scroll: the background image will move as the page scroll axis
  • Fixed: the background image will not move with the scroll axis of the page
  • Inherit: inherited Initial Value: Scroll
• Inheritance: No
• Applicable to: All elements

It is easy to understand when the value is scroll, that is, the background will scroll with the scroll bar. When the value is fixed, it indicates a fixed background. Since it is fixed, where is it fixed? This is determined by the value of background-position. We know that the value of background-position is relative to a region. So what is the Background-position of the background with background-attachment as fixed? Is it the element of the background? No, but relative to the browser window, no matter where the element is located, if its background-attachment is fixed, its background position is irrelevant to itself, because the background is always located by referring to the visible windows of the browser. Of course, if an element is outside the browser's visible window, but its background is inside the browser window, we still cannot see this background. Only this element appears within the browser window, and we can see it to see its background. Remember, the background where the background-attachment is fixed will never change. Even if the element moves, the background will remain there, and it will only be displayed on its original element.

Most browsers support Background-Attachment: fixed, except IE6. In fact, Liu Ye also supports background-Attachment: fixed, but not all elements. He is only supported by HTML and body elements.

That's all. By taking full advantage of your imagination, you can use this product to get something very foreign.