我正在尝试设置我的网页,以便它的顶部具有大的响应图片,并随页面滚动而不是固定。

我想做的一个确切例子是:http://teamtreehouse.com/

这是我尝试重新创建它的尝试。请帮忙!!



<!DOCTYPE html>
<head>
    <style>
        html {
            background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

    <br>
    <br>
    <br>
     <h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>

</body>

</html>

最佳答案

这是您要实现的目标吗? :

<head>
    <style>

body, html {
      padding:0;
      margin:0;
}

.header {
  background: url(https://www.pathful.com/static/images/header/header-bg-home.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  min-height:450px;
}

    </style>
</head>
<body>
<div class="header"></div>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
<br>
<h1 class="title">How to make picture scroll with page while keepin the pic responsive?</h1>
<br>
<br>
</div>


http://codepen.io/anon/pen/bGglA

将背景附加到html标签是错误的。

关于html - 我无法使此响应性背景图片随页面滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26301095/

10-12 12:56
查看更多