视差图像无响应

Question

我正在尝试创建视差背景，但它没有响应

我知道这个问题以前被问过 - 我尝试了所有这些解决方案，但它仍然不起作用。请帮忙！

此外，当代码在浏览器上运行时，它不显示标题部分

我必须向上滚动才能看到标题部分

这是我的代码：

唰��

<div id="wrapper">
<div class="container">
<div class="herounit">
<img src="https://vignette.wikia.nocookie.net/phobia/images/f/fc/Dark.jpg/revision/latest?cb=20161109164921" alt="Main Image" class="heroimg"/>
<header><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz1tUrD3X2T2P2uEh12yZmZWYPpr7yQhy5GNehg3s-ChndJ_iT"/></a></header>                  
<div class="description">
<p>Pasture he invited mr company shyness. But when shot real her. </br>Chamber her observe visited removal six sending himself boy. </br>At exquisite existence if an oh dependent excellent. Are gay head need down draw. </br>Misery wonder enable mutual get set oppose the uneasy. </br>End why melancholy estimating her had indulgence middletons.</p>
</div>                      
<div class="herotext">
<div class="contactForm">  
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>

咔嚓-

*{padding:0;margin:0;border:0}html{overflow:hidden}img{width:100vw}.container{-webkit-overflow-scrolling:touch;-webkit-perspective:1px;perspective:1px;overflow-x:hidden;overflow-y:auto;height:100vh}.herounit{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.heroimg{-webkit-transform:translateZ(-1px) scale(2);transform:translateZ(-1px) scale(2);position:relative;top:calc(((100vh - 51.54vw)/ 4) * -2)}

* {
padding: 0;
margin: 0;
border: 0;
}
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: fixed;
top: 10px;
left: 0;
width: 100%;
text-align: center;
}
header img {
height: 100px;
width: 150px;
}
.description {
position: absolute;
float: left;
top: 12%;
left: 10px;
width: 100%;
font-size: 1.5em;
line-height: 1.8em;
height: auto;
padding: 1em;
margin: 1em;
color: #fff;
text-transform: uppercase;
}
.herounit  img{
height: 100%;
}
.herotext {
position: relative;
z-index: 2;
-webkit-transform: translateZ(0);
background-image: url("https://www.jindalpanther.com/upload/pages/contact_us.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-color: #111;
height: 100%;
text-align: center;
padding: 2rem 0 2rem;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;                  
}
.herotext h1 {
font-size: 30px;
border-bottom: 3px solid #fff;
width: 350px;
margin: 50px auto;
color: #fff;
}
.contactForm {
max-width:700px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] {
font:400 50px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
padding:25px;
margin:50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 50px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #fff;
border-width: 1px;
border-radius: 5px;
margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.7);
margin:0 0 5px;
padding:10px;
height: 50px;
font-size: 1em;
line-height: 1.2em;
color: #111;
position: relative;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:300px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
margin:0 0 5px;
padding: 20px;
margin-top: 20px;
height: 60px;
width: 100%;
max-width: 300px;
color: #fff;
font-size: 1.5em;
border-style: solid;
border-color: #fff;
border-width: 1px;
border-radius: 5px;
text-transform: uppercase;
background-color: rgba(255, 255, 255, 0);
}
#contact button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#333;
}
:-moz-placeholder {
color:#333;
}
::-moz-placeholder {
color:#333;
}
:-ms-input-placeholder {
color:#333;
}

在这里运行 jsfiddle 示例 - jsfiddle

Answer 1

同样当代码在浏览器上运行时， 它不显示标题部分 我必须向上滚动才能看到标题部分。

这是因为您在输入元素上设置了自动对焦属性。当页面加载时，浏览器将立即跳转到它。