So platzieren Sie Text über ein Parallax Scrolling-Bild

Ich versuche, eine Überschrift über das Bild auf meiner Website anzuzeigen. Hier ist eine Geige:So platzieren Sie Text über ein Parallax Scrolling-Bild

https://jsfiddle.net/o3942ppa/1/

Ich habe versucht, das Problem zu beheben, indem Sie eine Überschrift mit dem ID-Header zu schaffen wie:

<h2 id="header">Text</h2>

und Stil es unbedingt mit einem Z-Index, um sicherzustellen, es zeigt auf top wie:

#header{ 
    position: absolute; 
    z-index: 1000; 
    top: 200px; 
    left: 200px; 
}

I wurde unter der Annahme, dass dieser bei der Positionierung der Titel auf der ganzen Elementen führen würde, von der Kante des Dokuments positioniert. Allerdings habe ich nicht das gewünschte Ergebnis erhalten. Wie würde ich das machen? Außerdem habe ich letzte Nacht gelesen, dass es in der Regel besser ist, Schwimmern als Positionieren zu verwenden. Nicht sicher, ob das in diesem Fall gilt oder ob es überhaupt stimmt. Ich würde mich freuen, wenn jemand wiegen könnte.

Quelle

2017-04-05 natem1270

Sie müssen die Struktur Ihres HTML-Inhalts anpassen, so dass Sie #header vor Ihrer .parallax ist. Arbeiten mit dem gewünschten Stil:

.parallax{ 
 
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 

 
#header{ 
 
    position: absolute; 
 
    z-index: 1000; 
 
    top: 200px; 
 
    left: 200px; 
 
} 
 

 
.text-box{ 
 
\t height: 600px; 
 
\t padding: 50px; 
 
} 
 
@media only screen and (max-device-width: 1024px) { 
 
    .parallax { 
 
     background-attachment: scroll; 
 
    } 
 
} 
 

 
.navbar { 
 
    margin-bottom: 0 !important; 
 
}

<title>Bootstrap Default Template</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 
<h1 id="header">Text</h1> 
 
<div class="parallax"></div> 
 
<div class="col-lg-12 text-box text-center"> 
 
<h1>Restauraunt Heading</h1> 
 
</div> 
 
</body>

Quelle

2017-04-05 16:12:06

Ihre .paralax Klasse auch Position Attribut als relate oder absolute hinzugefügt haben muss. Sie können auch z-index: 0

Ah, Satz und z-index: 1 ist genug für Kopf :)

Quelle

2017-04-05 16:18:46 Ula

Sie müssen position: absolute zu position: fixed ändern. Durch die absolute Positionierung wird das Element relativ zum übergeordneten Container platziert. Feste Positionierung positioniert es relativ zum Dokumentenkörper. Relativpositionierung (position: relative) positioniert es relativ zu der Stelle, an der es natürlich in den Fluss des DOM fallen würde.

Fiddle here

Quelle

2017-04-05 16:27:02 sn3ll

Eine andere Lösung ist einfach zu Ihrem h1 in eine Paralax div setzen ...

.parallax{ 
 
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"); 
 
    min-height: 500px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    margin: 0; 
 
    position:relative; 
 

 
} 
 
.text-box{ 
 
\t height: 600px; 
 
\t padding: 50px; 
 
} 
 
@media only screen and (max-device-width: 1024px) { 
 
    .parallax { 
 
     background-attachment: scroll; 
 
    } 
 
} 
 
#header{ 
 
position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 
.navbar { 
 
    margin-bottom: 0 !important; 
 
}

<title>Bootstrap Default Template</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body> 
 
<div class="parallax"><h1 id="header">Text</h1></div> 
 
<div class="col-lg-12 text-box text-center"> 
 
<h1>Restauraunt Heading</h1> 
 

 
</div> 
 
</body>

Quelle

2017-04-05 16:37:10

So platzieren Sie Text über ein Parallax Scrolling-Bild

Antwort

Verwandte Themen