The use and definition of css background-attachment attribute-CSS Tutorial-php.cn

The use and definition of css background-attachment attribute

黄舟

Release： 2017-06-21 11:17:02

Original

2332 people have browsed it

background-attachment -- Define how the background image moves with the scroll axis

Value: scroll | fixed | inherit

scroll: As the page scrolls The axis background image will move

fixed: The axis background image will not move as the page scrolls

inherit: Inherit

Initial value: scroll

Inheritance: No

Applies to: all elements

background: background.attachment: attachment.

Example

body 
{	
background-image:url(&#39;list-orange.png&#39;);	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

Copy after login

The background image of the screen is An orange line. As the scroll axis moves, the visual position of the orange line remains unchanged.

CSS background-attachment property example--You can try editing

CSS background-attachment property example

Parallax Scrolling refers to making multi-layer backgrounds move at different speeds to form a three-dimensional motion effect and bring an excellent visual experience. As a hot trend in web design this year, more and more websites have applied this technology.

If you don’t understand, you can first take a look at the effect on eBay: http://www.ebay.com/new/

In fact, it is to fix the background and not let it move with the scroll axis, but The container containing the background is scrolled, causing a visual difference that appears to be the same as switching scenes. (Don’t let this explanation be too confusing...)

The attribute that defines the background scrolling method in CSS is background-attachment

background-attachment -- defines the way the background image moves with the scroll axis

Values: scroll | fixed | inherit

scroll: Default value. Background image will move as the rest of the page scrolls.

fixed: The background image does not move when the rest of the page scrolls.

inherit: Specifies that the setting of the background-attachment attribute should be inherited from the parent element.

Initial value: scroll

Inheritance: No

Applies to: all elements

Browser support:

It has been tested on chrome, opera, safari, firefox, and ie7-8, so it means that it does not work under IE6~

To use this attribute under IE6, you need to place background-attachment:fixed in the body Or in html, that is to say, it is useless in other tags. The effect you can see in the w3c above is because it is placed in the body.

This is a demo I made myself, click to download

Code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

Copy after login

The above is the detailed content of The use and definition of css background-attachment attribute. For more information, please follow other related articles on the PHP Chinese website!