Ich versuche, das H1-Tag, "Portfolio" unter dem nächsten Abschnitt (nur ein paar lila) verschwinden, wie der Benutzer nach unten scrollt.Lassen Sie den Inhalt über h1 Parallaxe gleiten. Z-Index wird nicht angewendet
Ich habe versucht, die h1 Text haben einen Z-Index von -1, aber das macht den Text unter dem Hintergrundbild verschwinden.
Wenn ich den Z-Index für den Inhalt, der über den oberen Rand des Textes gleiten soll, höher setze, ist das h1 "Portfolio" immer noch oben. Wie kann ich den Parallax-Effekt für den Text "Portfolio" erstellen? http://codepen.io/anon/pen/QNaoyO
Bonuspunkte, wenn Sie den gleichen Effekt haben, wenn der Hintergrund kein Bild, sondern eine Farbe ist. Ich habe gerade ein Bild von einer Farbe als Hintergrund.
HTML
<div id="portfolio"><h1 id="portfolioTitle">Portfolio</h1></div>
<section class="mainContent" style="height: 600px; background-color: purple;"></div>
CSS #portfolioTitle { text-align: center; Breite: 75%; Position: fixiert; links: 50%; Rand links: -37,5%; /z-index: -1 // macht es/ verschwinden}
.mainContent {
z-index: 10;
}
#portfolio {
/*background-color: #27f5eb;*/
/*background-color: #DD67F5;*/
background-image: url(https://www.startupinacar.com/wp-content/uploads/2016/04/blackjackPic.png);
height: 300px;
/*position: fixed;*/
background-attachment: fixed;
width: 100%;
z-index: 10;
}
Danke! Ich wusste nicht, dass es einen Unterschied mit dem Hintergrund-Anhang gibt: fixed und position: fixed, funktioniert. Einer behob das Problem, der andere nicht. oh .. Es könnte die relative Positionierung des mainContent gewesen sein ... –