zoukankan      html  css  js  c++  java
  • background-attachment 制造视差滚动效果案例

    简介

    background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个:

    • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed 当页面的其余部分滚动时,背景图像不会移动。
    • inherit 规定应该从父元素继承 background-attachment 属性的设置。ie 8不支持此属性值。

    实现

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                 1280px;
                height: 1600px;
                padding-top: 200px;
                margin:auto
            }
            .bg-attachment{
                height:700px;
                background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_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;
            }
            .div2{
                background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_10.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="bg-attachment"></div>
            <div class="bg-attachment div2"></div>
        </div>
    </body>
    </html>
    

    参考

    http://www.cnblogs.com/mofish/archive/2012/12/28/2837622.html

  • 相关阅读:
    cocostudio 使用教程
    anrdroid AVD启动不起来的问题。Waiting for HOME ('android.process.acore') to be launched
    Android SDK无法更新的问题解决办法
    Code(容斥,好题)
    莫比乌斯反演(转)
    随笔--新建查询
    11427
    uva11722
    uva11021
    How many integers can you find(容斥+dfs容斥)
  • 原文地址:https://www.cnblogs.com/everlose/p/12493505.html
Copyright © 2011-2022 走看看