我正在尝试设置我的网页,以便它的顶部具有大的响应图片,并随页面滚动而不是固定。
我想做的一个确切例子是: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/