缩放网页时的问题

Issue when zooming on web page

本文关键字：问题 网页 缩放      更新时间：2023-09-26

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

一切工作，但一个容器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%的高度属性叠加，它没有工作。这在手机游戏中尤其突出。

问题可能是你这样做的方式，你的css显示容器的高度和宽度为100%，然而(取决于你如何构建你的html)容器只会使100%的浏览器窗口，而不是网页本身。

我认为像Oscar建议的那样修复你的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;
}
<标题> JSFiddle
相关文章：