Hallo Forum!
Mein Name ist Jens, ich habe in der Vergangenheit hier und da per HTML einfache Websites "gebaut" (ist schon 20 Jahre her), seither hat sich ja sehr viel getan. Aktuell arbeite ich an einer privaten Seite und möchte diese gerne ansprechend gestalten. Dazu bediene ich mich des Bootstrap 3/4 und ich lerne aktuell viel über CSS.
Zu meinem Problem: Ich habe mit der Klasse .fixed-top eine Row fixiert und dort meine Navigation plaziert. Diese würde ich gerne per halbtransparente Bilder erstellen (mit Rollover-Wechsel). Das klappt soweit. Jedoch: Wenn ich den Rest des Contents scrolle, überdeckt natürlich dessen Inhalt dann die transparenten Bereiche, was doof aussieht. Ich habe das aktuell so gelöst dass ich die jeweiligen Rolloverbilder nicht transparent sondern in einem gewissen Maße im Hintergrund untergehend gestaltet habe. Das sieht aber bei verschiedenen Viewports dann mitunter auch nicht optimal aus, da das Hintergrundbild auf cover gesetzt ist und das ganze dann nicht mehr optimal passt.
Gibt es denn eine Möglichkeit, im Bereich der Navigations-Row (100 Px hoch), sozusagen den Rest des Contents einen "Schutzbereich" auf transparent zu schalten, damit die Navigation mit den transparenten Bereichen beim Scrollen trotzdem "leer/frei" bleibt? Man kann ja mit CSS3 so viel machen, vielleicht ist sowas ja auch hinterlegt?
Ich danke euch herzlichst für Anregungen und Lösungsansätze!
Viele Grüße!
Jens