0

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

（我所说的 div 是 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*/
}
4

2 回答 2

0

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

这是一个例子：

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

于 2013-07-08T14:14:58.377 回答
0

看起来您的所有内容都在.bg-containerdiv 内，因此当您将其设置为具有全屏宽度的固定位置时，您将消除滚动功能。轻松修复：

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

  <div class="main">
     [ ... ]
于 2013-07-08T14:51:07.143 回答