基本內容

background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。
這個屬性存在瀏覽器兼容問題。

屬性值：

• scroll 背景圖片隨著頁面的滾動而滾動，這是默認的。
• fixed 背景圖片不會隨著頁面的滾動而滾動。
• local 背景圖片會隨著元素內容的滾動而滾動。

視差滾動

可以實現簡單的視差滾動效果，類似于 QQ官網 的效果。
參考文章 滾動視差？CSS 不在話下

<div class="container">
    <div class="content">1</div>
    <div class="g-img1"></div>
    <div class="content">2</div>
    <div class="g-img2"></div>
</div>

.container{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.content{
    width: 100%;
    height: 100%;
    align-items: center;
}

.g-img1 {
    width: 100%;
    height: 100%;
    background-image: url('../image/11.webp');
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
.g-img2 {
    width: 100%;
    height: 100%;
    background-image: url('../image/22.png');
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat:no-repeat;
}

效果

水波效果

參考文章：CSS Water Wave (水波效果)

原理是基于上面文章的，這里是對這個效果的簡單學習。

原理

水波效果的原理其是用六個 div 疊加在一起，讓6個圓依次變大。需要注意的地方就是：
要設置層級，通過延時函數讓6個圓依次變大、層級越低的圓越早出來。

forwards：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。

<div class="main">
     <div class="wave wave5"></div>
     <div class="wave wave4"></div>
     <div class="wave wave3"></div>
     <div class="wave wave2"></div>
     <div class="wave wave1"></div>
     <div class="wave wave0"></div>
 </div>

.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.wave {
  // 繪制一個圓，并讓圓居中
  position: absolute;
  top: calc((100% - 30px) / 2);
  left: calc((100% - 30px) / 2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.wave0 {
  background: #f00;
  z-index: 2;
  background-size: auto 106%;
  animation: w 1s forwards;
}
.wave1 {
  background: #d00;
  z-index: 3;
  animation: w 1s forwards;
  animation-delay: 0.2s;
}
.wave2 {
  background: #b00;
  z-index: 4;
  animation: w 1s forwards;
  animation-delay: 0.4s;
}
.wave3 {
  background: #900;
  z-index: 5;
  animation: w 1s forwards;
  animation-delay: 0.6s;
}
.wave4 {
  background: #700;
  z-index: 6;
  animation: w 1s forwards;
  animation-delay: 0.8s;
}
.wave5 {
  background: #500;
  z-index: 7;
  animation: w 1s forwards;
  animation-delay: 1s;
}
@keyframes w {
  0% {
    top: calc((100% - 30px) / 2);
    left: calc((100% - 30px) / 2);
    width: 30px;
    height: 30px;
  }
  100% {
    top: calc((100% - 200px) / 2);
    left: calc((100% - 200px) / 2);
    width: 200px;
    height: 200px;
  }
}

效果

優化版
在上面的基礎上，將背景色替換為背景圖片，并將背景設為固定：background-attachment:fixed;

<div class="main">
     <div class="wave wave5"></div>
     <div class="wave wave4"></div>
     <div class="wave wave3"></div>
     <div class="wave wave2"></div>
     <div class="wave wave1"></div>
     <div class="wave wave0"></div>
 </div>

.main {
  width: 100%;
  height: 100%;
  position: relative;
}
.wave{
  position:absolute;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width:30px;
  height:30px;
  border-radius:50%;
  background:url('../image/22.png');
  background-attachment:fixed;
  background-position:center center;
}
.wave0{
  z-index:2;
  background-size:auto 106%;
  animation:w 1s forwards;
}
.wave1{
  z-index:3;
  background-size:auto 102%;
  animation:w 1s .2s forwards;
}
.wave2{
  z-index:4;
  background-size:auto 104%;
  animation:w 1s .4s forwards;
}
.wave3{
  z-index:5;
  background-size:auto 101%;
  animation:w 1s .5s forwards;
}
.wave4{
  z-index:6;
  background-size:auto 102%;
  animation:w 1s .8s forwards;
}
.wave5{
  z-index:7;
  background-size:auto 100%;
  animation:w 1s 1s forwards;
}
@keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
  }
  100%{
    top:calc((100% - 350px)/2);
    left:calc((100% - 350px)/2);
    width:350px;
    height:350px;
  }
}