background-attachment的应用

利用 background-attachment实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style>
        .bg{
            width:600px;
            height:300px;
            background: url("https://m.360buyimg.com/mobilecms/s1125x549_jfs/t14722/187/592723918/97556/2aaa1638/5a3238eeNa6b28be2.jpg!q70.jpg") ;
            background-attachment: fixed;
        }
    </style>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <div class="bg"></div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </body>
</html>
posted @ 2017-12-16 11:51  沐荍  阅读(132)  评论(0)  编辑  收藏  举报