基本內(nèi)容

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

屬性值：

• scroll 背景圖片隨著頁(yè)面的滾動(dòng)而滾動(dòng)，這是默認(rèn)的。
• fixed 背景圖片不會(huì)隨著頁(yè)面的滾動(dòng)而滾動(dòng)。
• local 背景圖片會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)。

視差滾動(dòng)

可以實(shí)現(xiàn)簡(jiǎn)單的視差滾動(dòng)效果，類似于 QQ官網(wǎng) 的效果。
參考文章 滾動(dòng)視差？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 (水波效果)

原理是基于上面文章的，這里是對(duì)這個(gè)效果的簡(jiǎn)單學(xué)習(xí)。

原理

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

forwards：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。

<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 {
  // 繪制一個(gè)圓，并讓圓居中
  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;
  }
}

效果

優(yōu)化版
在上面的基礎(chǔ)上，將背景色替換為背景圖片，并將背景設(shè)為固定：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;
  }
}