尝试通过使用浮动和包装器的滚动文本获得固定背景

Question

我有一个网页，其中的文本、按钮和嵌入链接都在一个包装器中。除此之外，我还使用浮点数来 space 它们。但是，我正在尝试添加一个固定的背景并保持在原位，同时网页上下滚动。我一直无法这样做，从我所做的来看，背景图片要么停留在网页的顶部，要么停留在网页的底部。

我用过的CSS是这样的：

.Background {
    background-image: url(Background.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top;
    position:absolute;
    height:610px;
    width: 700px;
    margin:0;}

对于 HTML 我使用了：

<div><img src="Background.jpg"></div>

我对 HTML 和 CSS 还很陌生，我很迷茫。任何帮助将不胜感激。

Answer 1

我相信你想要这样的东西

<html>
  <body>
    <div class="content">
      content here
    </div>
  </body>
</html>

然后css

.content {
  font-size: 55px;
  background: url(http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg);
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

这是一个 fiddle，如果它更容易看的话 - https://jsfiddle.net/d8vzsbL8/

尝试通过使用浮动和包装器的滚动文本获得固定背景

Trying to get a fixed background with scrolling text which is using floats and a wrapper

html

css

wrapper

css-float