Responsive Menü mit Text auf dem Hintergrundbild

Ich habe ein reaktionsfähiges Menü oben auf einem Bildhintergrund, der auch Text oben hat.Responsive Menü mit Text auf dem Hintergrundbild

Da ich den Text messaqge mit "position: absolute" festlegen muss, um es über dem Hintergrundbild zu überlagern, wenn ich das Menü erweitern, werden die Menüelemente auf die Textnachricht überlagern. Wie repariere ich das?

Das andere Problem ist, ich möchte das Menü auf dem Hintergrundbild transparent sein, anstatt auf dem dunkelgrauen Hintergrund zu sein. Ich finde jedoch keinen Weg, dies zu tun.

Here's the code

Quelle

2016-05-12 notlkk

Sie möchten vielleicht für Sie Kopfzeile Nachricht, um es innerhalb Ihrer Header-Folien div und dann positionieren Sie diese div zu relativ. Auf diese Weise ist Ihre Header-Nachricht tatsächlich absolut im Header und nicht im Body positioniert. Wenn Sie möchten, dass Ihr Nav über das Header-Bild transparent ist, können Sie Ihren Körper relativ positionieren, um sicher zu sein, und Ihr Navi auf absolut positionieren, ihm einen hohen Z-Index geben und Hintergrund-Opazität durch Verwendung von rgba-Farben erreichen. So etwas wie folgt aus:

Hier ist eine Geige Demo Fiddle Demo

Rubrik:

.header-slides { 
    height: 500px; 
    border: 1px solid black; 
    position:relative; 
} 

<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'> 
    <h2>Header Message</h2> 
</div>

Dann wird Ihr nav:

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: rgba(20,20,20,0.8); 
    min-height: 30px; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    z-index:5; 
}

Und dann entfernen Sie die Postion der relativen von Responsive css bei maximaler Breite von 680px von Ihrem Nav so entfernen Sie die folgenden vollständig:

ul.topnav.responsive {position: relative;}

Quelle

2016-05-12 01:06:00

Das ist auch eine sehr gute Lösung. Die einzige Sache, die mich betrifft, ist, dass, wenn die Anzahl meiner Menüpunkte größer ist, sie schließlich den größten Teil des Hintergrundbildes überlagern werden. Ich würde es vorziehen, das Hintergrundbild nach unten zu schieben, damit es nicht mit dem Menü überlagert wird. Es scheint also, wenn ich die Nachricht einfach in den Header-slides div lege und das div relativ positioniere, kann ich das Hintergrundbild nach unten drücken. Ich werde Ihre Lösung näher betrachten, um den Nav-Hintergrund transparent zu machen. Vielen Dank. – notlkk

Das einzige Problem mit dem Drücken des Inhalts mit einem transparenten Hintergrund ist, dass Sie nichts hinter dem transparenten Nav sehen werden, außer für Weiß, wenn das Sinn macht. Es wird also nur die Hintergrundfarbe Ihres Navis heller erscheinen lassen, aber es wird immer noch wie eine feste Farbe aussehen. Beispielgeige https://jsfiddle.net/wamosjk/m8k0t5f0/ –

Sie haben absolut Recht. Ich habe bemerkt, dass ich anfange, die Farbe zu spielen. Ich denke, ich bleibe beim dunkelgrauen Hintergrund und drücke das Hintergrundbild herunter. Danke für Ihre Hilfe. – notlkk

z-index, bruh.

Wenn sich Elemente überlappen, bestimmt z-Reihenfolge, welche die andere abdeckt. Ein Element mit einem größeren Z-Index deckt im Allgemeinen ein Element mit einem niedrigeren ab.

.topnav{z-index:9999999}

try it.

Für transparente BG-Farben können Sie rgba() verwenden. Es gibt online tools, um Ihre Farben alle oder den Ort zu konvertieren.

Quelle

2016-05-12 00:47:23

Ich weiß nicht warum, aber ich glaube, ich war verwirrt von der SMS oben, also dachte ich, der Z-Index funktioniert nicht. Aber Sie haben Recht, es ist genauso einfach wie die Verwendung des Z-Index. Duh ..... Was ist mit dem Hintergrund des Top Nav? Gibt es eine einfache Möglichkeit, das in einen transparenten Hintergrund anstatt in Dunkelgrau zu verwandeln? – notlkk

Yessir, siehe Bearbeiten. –

Responsive Menü mit Text auf dem Hintergrundbild

Antwort

Verwandte Themen