Question

当我从移动设备的顶部滚动时，我的背景图片会稍微调整一下。当我再次滚动到顶部时，它会恢复到它的大小。你可以看到它here

我尝试使用

background-attachment：fixed;

除了所有其他css代码，你可以在下面看到，但它没有用。

CSS

.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after { 
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0; 
}

.bg-1 li span, .bg-2 li span, .bg-3 li span { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 1;
  z-index: 0;
}

.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }

ol,ul {
  list-style:none;
}

HTML

 <body>

  <ul class="bg-2">
    <li><span></span></li>
  </ul>

  <nav class="navbar">
    <div class="container-fluid social-nav">

  ...

只是为了解释，这是一个列表，因为如果我想制作一个幻灯片库，它可以添加更多

<li><span></span></li>

但我只在主页上使用幻灯片。

如何防止调整大小？

Answer 1

如果背景图像在初始滚动时调整大小，我假设具有该背景的元素必须具有动态高度，使用CSS或JS / jQ脚本中的vw / vh生成。我遇到了同样的问题，我发现了我认为解决这个问题的正确方法（至少在移动浏览器提供自己的解决方法之前）。

使用简单的jQuery函数，您可以在页面加载时存储窗口的宽度，并使用它来限制容器的大小调整功能，使视口大小比桌面断点更宽（992px +）和更窄的视口只要视口宽度发生变化，而不仅仅是高度。这样，在移动设备和平板电脑设备上滚动时，只会调整垂直视口大小，因此不会触发调整大小功能。

TRUE

CodePen： https://codepen.io/brandonmcconnell/pen/jayYbB

Answer 2

看看background: fixed no repeat not working on mobile。

我认为主要区别在于z-index=0，请尝试将其更改为-10。

防止背景图像在滚动时调整大小

2 个答案: