如何创建：视差滚动
学习如何使用 CSS 创建“视差”滚动效果。
视差滚动
视差滚动是一种网站设计趋势，其中背景内容（例如图像）在滚动时的移动速度与前景内容不同。点击下面的链接，查看有视差滚动和没有视差滚动的网站之间的区别。
注意：视差滚动并不总是在移动设备/智能手机上有效。但是，您可以使用媒体查询在移动设备上关闭此效果（请参阅本页最后一个例子）。
如何创建视差滚动效果
使用一个容器元素，并向该容器添加一幅具有特定高度的背景图像。然后，使用 background-attachment: fixed 创建实际的视差效果。其他背景属性用于居中和完美缩放图像：
以像素为单位的实例
上面的例子使用像素来设置图像的高度。如果您想使用百分比，例如 100%，以使图像适合整个屏幕，请将视差容器的高度设置为 100%。注意：您还必须将 height: 100% အသုံးပြုသော <html> နှင့် <body>:
တိုင်းတာ ပုံစံ
body, html {
height: 100%;
}
.parallax {
/* အသုံးပြုသော ပုံ */
background-image: url("img_parallax.jpg");
/* ပုံအချင်း ၁၀၀% */
height: 100%;
/* လျှပ်ပေးခြင်း ကို ဖွဲ့စည်းတည်း */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
အားကစားသူ နှင့် အားကစားရုံ တွင် လျှပ်ပေးခြင်း ကို ပိတ်ပြီး အသုံးပြုခြင်း အတွက် ပုံအချင်း ၃၆၆ ပတ်ဝိုက် အထိ ဖြစ်သည်။ လိုအပ်ခဲ့လျှင် ပုံအချင်း အသစ် ကို ထပ်ပေါင်း သို့မဟုတ် လျှော့ချတာ ကို ပြုလုပ်နိုင် background-attachment: fixed အခြေခံအုပ်စုအမှတ် ၆၃၆ ပတ်ဝိုက် လျှပ်ပေးခြင်း သည် အများစု အနှစ်သုံး အားကစားသူ နှင့် အားကစားရုံ တွင် အသုံးပြုခြင်း အတွက် အတိုင်းအတာ ဖြစ်သည်။ အမှတ်အသား အသစ် ကို ပြောင်းလဲသွားခြင်း ဖြင့် အားကစားသူ နှင့် အားကစားရုံ တွင် လျှပ်ပေးခြင်း ကို ပိတ်ပြီး ပုံအချင်း ၃၆၆ ပတ်ဝိုက် လျှပ်ပေးခြင်း ကို ပိတ်ခြင်း ဖြစ်သည်။
အမှတ်အသား
/* အားကစားသူ နှင့် အားကစားရုံ တွင် လျှပ်ပေးခြင်း ကို ပိတ်ပြီး အသုံးပြုခြင်း အတွက် ပုံအချင်း ၃၆၆ ပတ်ဝိုက် အထိ ဖြစ်သည်။ လိုအပ်ခဲ့လျှင် ပုံအချင်း အသစ် ကို ထပ်ပေါင်း သို့မဟုတ် လျှော့ချတာ ကို ပြုလုပ်နိုင် */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
အခြေခံအုပ်စုအမှတ် ၆၃၆ ပတ်ဝိုက် လျှပ်ပေးခြင်း သည် အများစု ပိုင်းလုံး အနှစ်သုံး အားကစားသူ နှင့် အားကစားရုံ တွင် အသုံးပြုခြင်း အတွက် အတိုင်းအတာ ဖြစ်သည်။ အမှတ်အသား အသစ် ကို ပြောင်းလဲသွားခြင်း ဖြင့် အားကစားသူ နှင့် အားကစားရုံ တွင် လျှပ်ပေးခြင်း ကို အားပေးပြီး ပုံပေါ် အချင်း ၃၆၆ ပတ်ဝိုက် လျှပ်ပေးခြင်း ကို ပိတ်ခြင်း ဖြစ်သည်။ .parallax အက်ယ် background-attachment သုံးရာ fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。
