我正在使用此处完成的效果在我的网站上工作:http://keithclark.co.uk/articles/pure-css-parallax-websites/除了 chrome，一切正常，我不知道为什么。有人可以告诉我问题出在哪里吗？这是我的网页:http://emmanuelmelendez.com.mx/home.html谢谢!
HTML
<header>
<!-- !Menu -->
<ul>
<li><a href="home.html"> Inicio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</header> <!--end Menu-->
<div class="parallax">
<!-- !Demo reel-->
<div class="parallax__group">
<div class="parallax__layer parallax__back">
<video autoplay loop poster="img/bg/Logo.jpg" class="background">
<source src="video/bg/IntroReel.webm" type="video/webm">
<source src="video/bg/IntroReel.mp4" type="video/mpeg">
</video>
</div>
<div id="reel" class="parallax__layer parallax__base">
<h1>Bienvenidos a mi sitio</h1>
<a href="#">Ver Demo Reel</a>
</div>
</div><!--end Demo Reel-->
<!-- !Servicios -->
<div class="parallax__group">
<div class="parallax__layer parallax__base" id="servicio">
<h1>Producciones</h1>
</div>
</div><!--end Servicios-->
<!-- !Video -->
<div class="parallax__group">
<div class="parallax__layer parallax__back">
<video autoplay loop poster="img/bg/video.jpg" class="background">
<source src="video/bg/fondoVideo.webm" type="video/webm" >
<source src="video/bg/fondoVideo.mp4" type="video/mpeg">
</video>
</div>
<div class="parallax__layer parallax__base" >
<h2>Audiovisual</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
</div>
</div><!--end Video-->
<!-- !Web -->
<div class="parallax__group" id="web">
<div class="parallax__layer parallax__base">
<h2>Desarrollo Web</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
</div>
</div><!--end Web-->
<!-- !Fotografia -->
<div class="parallax__group">
<div class="parallax__layer parallax__back">
<img class="background" src="img/bg/foto.jpg" alt="Fondo Foto">
</div>
<div class="parallax__layer parallax__base">
<h2>Fotografía</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
</div>
</div><!--end Fotografia-->
<!-- !Redes -->
<div class="parallax__group" id="redes">
<div class="parallax__layer parallax__base">
<h3>Sígueme en mis redes sociales</h3>
<a href="https://www.instagram.com/emmanu_stuff/">Instagram</a>
<br>
<!-- SnapWidget -->
<iframe src="http://snapwidget.com/sc/?u=ZW1tYW51X3N0dWZmfGlufDE1MHwzfDN8fHllc3wyMHxub25lfG9uU3RhcnR8eWVzfG5v&ve=271115" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:960px; height:150px"></iframe>
<br>
<br>
<a href="https://500px.com/emmanuelmelendz">500px</a>
<br>
<!-- 500pxWidget -->
<iframe src="http://500pxwidget.com/in/?u=ZW1tYW51ZWxtZWxlbmR6fGlufDEyMHw2fDF8fG5vfDV8" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:750px; height: 125px" ></iframe>
</div>
</div><!--end Redes-->
<!-- Copyright-->
<div class="parallax__base">
<div id="Copyright"> Emmanuel Melendez ©<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</div>
</div><!-- end copyright-->
</div><!-- end parallax-->
CSS
body{
background: white;
font-family: Light, Fallback, helvetica;
color: white;
font-size: 21px;
overflow: hidden;
text-align: center;
}
h1{
margin-top: 35vh;
background: rgba(0,0,0,.6);
padding: 10px;
font-family: Titulo,Fallback, helvetica;
font-size: 90px;
}
h2{
margin-top: 25vh;
background: rgba(0,0,0,.6);
padding: 10px;
font-family: Titulo,Fallback, helvetica;
font-size: 90px;
}
h3{
margin-top: 15vh;
background: rgba(0,0,0,.6);
padding: 10px;
font-family: Titulo,Fallback, helvetica;
font-size: 60px;
}
p{
width: 960px;
margin: 0 auto;
padding: 16px;
text-align: justify;
background: rgba(0,0,0,0.6);
}
/* !PC */
@media all and (min-width:600px) {
/* Menu */
header{
background: white;
height: 44px;
font-family: Menu, Fallback, Helvetica;
width: 100%;
border-bottom: 1px solid #b31219;
}
header ul{
width: 960px;
padding-left: 20px;
margin: 0 auto;
list-style-type: none;
color: black;
}
header li{
display: table-cell;
vertical-align: middle;
padding-top: 11px;
}
header li a{
padding: 12px 40px;
text-decoration: none;
color: black;
}
header li a:hover{
background: black;
color: white;
}
/* Parallax */
.parallax {
height: 500px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
width: 100vw;
-webkit-transform-style: -webkit-preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer{
position: absolute;
overflow: visible;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 2;
}
.parallax__back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 1;
}
/* !Reel */
#reel a{
text-decoration: none;
color: white;
font-family: Titulo,Fallback, helvetica;
font-size: 50px;
text-align: center;
padding: 10px 20px;
background: #b31219;
border-radius: 15px;
}
#reel a:visited{
}
#reel a:hover{
background: black;
}
#reel a:active {
color:black;
background: white;
}
/* Servicios */
#servicio{
background: #005280;
}
/* Web */
#web{
background-image: url('/img/bg/web.jpg');
background-position: center center;
background-size: auto 100%;
}
/* Fondos*/
.background{
/* solo usar para alinear contenido en formato full HD*/
width: auto;
height: 100vh;
position: fixed;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -100;
}
/* Redes */
#redes{
background-image: url('/img/bg/medios.jpg');
background-size: 100% auto;
font-size: 50px;
font-family: Titulo, Fallback, helvetica;
}
#redes a{
padding: 0px 15px;
background: black;
text-decoration: none;
color: white;
}
#redes a:hover{
background: white;
color: black;
}
/* !Copyright */
#Copyright{
padding-top: 6vh;
width: 100%;
height: 16vh;
background: #b31219;
color: white;
font-size: 50px;
font-family: Titulo, Fallback, helvetica;
text-align: center;
}
}
最佳答案
你应该使用 preserve-3d 而不是 -webkit-preserve-3d
.parallax__group {
position: relative;
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d; /* <-- */
transform-style: preserve-3d;
}
关于html - 完整的 CSS 视差网站不适用于 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33989617/