【发布时间】：2017-02-14 18:14:56
【问题描述】：
body{
background-color: #000;
height: 100vh;
}
section {
width: 100%;
height: 100%;
}
#section1 {
background-color: #f0f0f0;
}
#bubbles1, #bubbles2{
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
#bubbles1{
background: url('img/greencat.png') 60% 50% no-repeat fixed;
background-color: #f0f0f0;
}
#bubbles2{
background: url('img/catb.png') 60% 50% no-repeat fixed;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('img/textgreen.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
}
#fish1{
background: transparent url('img/textblue.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
/* position: absolute;*/
top: 0px;
}
@media screen and (max-width: 860px){
ound-image: url('img/greencat-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
}
#bubbles2{
background-image: url('img/catb-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/06/Barnsley-House-Spa-2-844x800.jpg') no-repeat 3% 78% fixed;
position: absolute;
}
#fish1{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/08/Fairmont-Pittsburgh-30-844x800.jpg') no-repeat 3% 78% fixed;
}
}<section id="section1">
<div id="bubbles1"></div>
<div id="fish"></div>
</section>
<section id="section2">
<div id="bubbles2"></div>
<div id="fish1"></div>
</section>这是我的 html 和 css，问题是当我在移动设备上滚动时，图像会闪烁，而不是固定在固定位置。我在css中给出了固定的位置，但它不起作用。我检查了 Android、Windows 和 Apple 设备。 Android：滚动时第一张图片向上移动 Windows：第一个图像显示正确但是当我滚动第二个图像而不是它的flikering Apple：显示图像的白色背景，第二张图像可见但滚动时会闪烁
【问题讨论】：
-
你尝试过使用img标签吗？
-
@3bu1 是的，我试过但没有用