JSFiddle

Question

当我放大和缩小页面时，元素变得怪异。

一切都有效，但容器div（图像背景上的颜色叠加）。当你放大，或者你去移动时，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：

<div id="container">
    <div class="block">
         Content
    </div>       
</div>

我已经在叠加层上尝试了100％高度属性，但它不起作用。移动设备也是一个特别的问题。

Answer 1

问题可能在于你这样做的方式，你的css将容器显示为高度和宽度为100％，但是（取决于你如何构造你的html）容器只会产生100浏览器窗口的百分比，而不是网页本身的百分比。

Answer 2

我认为修正你的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;
}

放大网页时出现问题

2 个答案:

JSFiddle