Question

我正在尝试在后台创建一个带有固定div的网站，以充当背景内容的背景。当我在CSS中将其设置为position:fixed时，页面将不再滚动，并且任何其他方式似乎都会破坏页面。有什么建议吗？

（我正在谈论它与bg-container类的最高层）。

的index.php：（我<p>标签用于测试页面的滚动。）

<!DOCTYPE html>

<html>
<!-- 00a7fe -->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sublimity Gaming</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <div class="bg-container">
    <div class="main">
      <div class="header">
        <div id="logo-pos" style="height:100%;padding-bottom:100px">
          <a class="logo-sublimity" href="index.php" style="top:25px; left:60px"></a>
          <a class="logo-gaming" href="index.php" style="top:25px; right:60px"></a>
        </div>
        <div id="nav-pos">
          <p style="color:white; padding:100px">Point1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point2<br><br><br><br><br><br><br><br>Point3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point5</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我的main.css：

@charset "utf-8";
@font-face {
    font-family: "Roboto Lt";
    font-weight: normal;
    font-style: normal;
}
* {
    padding:0;margin:0
}
html, body {
    position:absolute;
    height:auto;
    overflow:auto
}
body {
    background-image:url('imgs/bg1.jpg'); background-color:black;
    background-position:top left; font-family:"Roboto Lt";
    font-size:14px; width:100%; position:fixed;
}
.main {
    background:transparent no-repeat top center;
    margin:0 auto;
    width:100%; padding-top:180px; padding-bottom: 24px;
}
.bg-container {
    background:url('imgs/container-bg.png') transparent top center fixed;
    background-repeat:repeat-y;
    width:1025px; height:100%;
    left:50%; margin-left:-512.5px;
    display:inline-block; position:fixed
}
.header {
    background:transparent no-repeat top center;
    margin:auto; height:180px; width:100%;
    position:absolute; margin-top:-180px
}
.logo-sublimity {
    background:url('imgs/logo-sublimity.png') no-repeat;
    width:447px;height:129px;
    position:absolute; display:block
}
.logo-gaming {
    background:url('imgs/logo-gaming.png') no-repeat;
    width:379px; height:129px;
    position:absolute; display:block
}
.nav-bar-container {
    /*TODO*/
}

Answer 1

您可以使用backstretch jquery。 Backstretch是一个jQuery插件，允许您将动态调整大小的背景图像添加到任何页面。图像将拉伸以适合页面，并随着窗口大小的变化自动调整大小。

以下是一个例子：

http://srobbin.com/jquery-plugins/backstretch/

Answer 2

看起来你的所有内容都在.bg-container div中，所以当你用全屏宽度将它设置到固定位置时，你就会消除滚动功能。轻松修复：

<body>
  <div class="bg-container"> </div>

  <div class="main">
     [ ... ]

固定Div从滚动停止整页

2 个答案: