background-attachment

作者: ismyshellyiqi | 来源:发表于2018-03-20 11:05 被阅读0次

css-background
CSS：background-attachment属性
background-attachment
Tailwind Background
CSS3
css实现双重背景图，过度动画，缩放等
滚动视差css
CSS review
HTML+CSS杂记
background-attachment属性

background-attachment:

默认值是scroll
fixed 不会随着其他的部分的滚动而滚动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo01</title>
  <style media="screen">
    html,body{
      width: 100%;
      height: 100%;
    }
    .box{
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .cont1{
      width: 100%;
      height: 400px;
      background-image: url('http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;

    }
    .cont2{
      width: 100%;
      height: 400px;
      background-image: url('http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;

    }
    .cont3{
      width: 100%;
      height: 400px;
      background-image: url('http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;

    }
  </style>
</head>
<body>
  <div class="box">
    <article class="cont1">

    </article>
    <article class="cont2">

    </article>
    <article class="cont3">

    </article>
  </div>
</body>
</html>