Javascript 在网页上缩放时出现问题

当我放大和缩小我的页面时，元素变得很奇怪

除了容器div（图像背景上的颜色叠加）之外，其他一切都可以工作。当您放大或转到mobile时，div不会继续显示在页面底部。相反，它在底部显示背景图像，而不显示图像覆盖

代码：

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url(../img/d2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

HTML:

内容

---

我已经在覆盖层上尝试了100%高度属性，但它不起作用。这对于移动设备来说也是一个特别的问题。

问题可能在于您执行此操作的方式，您的css将容器显示为具有100%的高度和宽度，但是（取决于您如何构建html）容器将只占浏览器窗口的100%，而不占网页本身的100%

我认为按照奥斯卡的建议修复CSS是一个很好的起点。做出这样的改变，看起来一切正常，但我对这个问题有点不清楚

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url('http://www.wallpick.com/wp-content/uploads/2013/11/Smokey-Abstract-Wallpaper-Wallpaper-HD.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

---

首先，您在CSS中的id选择器中缺少一个

#

：

#container{…

好的，问题与缺少的#无关。我只是忘了在答案中添加它。

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url('http://www.wallpick.com/wp-content/uploads/2013/11/Smokey-Abstract-Wallpaper-Wallpaper-HD.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}