Bewegliche Elemente hinter transparentem Bild verstecken?

Jens_M · 9. Dezember 2020

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

Sempervivum · 10. Dezember 2020

Hast Du das online? Dann poste doch mal die URL. Oder, wenn nicht, das HTML und CSS und ein Beispielbild als Anhang.

Jens_M · 10. Dezember 2020

Hallo!

Online ist da Projekt natürlich noch nicht, ich habe dir aber mal 2 Screens angehängt, auf denen man mein problem erkennen kann...

Danke erstmal!

Jens

html-seminar.de/woltlab/attachment/2694/

html-seminar.de/woltlab/attachment/2693/

Sempervivum · 10. Dezember 2020

Ja, ich sehe, was dein Problem ist. Anscheinend hast Du den Hintergrund so eingerichtet, dass er beim Scrollen fest steht. In dem Fall könntest Du einfach dem Header das selbe Hintergrundbild geben, denn es müsste ja nahtlos anschließen. Kleine Einschränkung: Der letzte Stand meiner Informationen sagt aus, dass die meisten mobilen Geräte aus Performancegründen background-attachment:fixed ignorieren.

BTW: Cooles Hobby, nur im Moment leider kein klarer Himmel. Bin gespannt, wie es sich in den nächsten Tagen entwickelt.

Jens_M · 10. Dezember 2020

Danke! Ja, Hobby ist zur Zeit echt eine Krankheit, nix zu machen Meine Bekannten in den USA können pro Woche viele Stunden belichten, ich schau in die Röhre.

Ich habe den Header in eine Tabelle eingepackt, die in der .col_lg12 Klasse eingebettet ist. Ich weiss sonst nicht wie ich verhindern soll dass der Content über den gesamten Bildschirm gespreizt wird. Da fehlt mir halt noch das Wissen. Du meintest jetzt also, ich solle z.B. das bg-image der Tabelle gleichsetzen mit dem Hintergrundbild des Bodies? Oder versteh ich da was falsch...?

Hab wieder einen Screen angehängt, ich gaube so funktioniert das nicht...

html-seminar.de/woltlab/attachment/2695/

Für mobile Geräte will ich die Seite eigentlich nicht optimieren, da die allermeisten Leute diese Art Seiten eh am Desktop anschauen und das Bootstrap mit den relativ wenigen Screengrößen flexibel genug ist.

Danke!

Jens

Sempervivum · 10. Dezember 2020

Poste doch mal das HTML als Text, d. h. kopieren und in Codetags, das Symbol </> rechts oben, hier einfügen. Und die Bilder als Dateianhänge hoch laden, den Button findest Du in der Leiste unten.

Jens_M · 10. Dezember 2020

Ich hab jetzt einfach mal ne Klasse definiert mit Hintergrundbild, funktioniert aber leider auch nicht...

Code

<body style="padding-top: 70px" onLoad="MM_preloadImages('grafik/nav-info-h.png','grafik/nav-home-h.png','grafik/nav-up-h.png','grafik/nav-down-h.png','grafik/nav-bilder-h.png','grafik/nav-proj-h.png','grafik/nav-akt-h.png')">
  <div class="container-fluid fixed-top">
    <div class="row">
      <div class="row">
      </div>
      <div class="col-lg-12eq">
        <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><img src="grafik/nav-links.png" width="50" height="100" alt=""/><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-home','','grafik/nav-home-h.png',1)"><img src="grafik/nav-home.png" alt="Home" width="60" height="100" id="nav-home"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-up','','grafik/nav-up-h.png',1)"><img src="grafik/nav-up.png" alt="hoch" width="38" height="100" id="nav-up"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-down','','grafik/nav-down-h.png',1)"><img src="grafik/nav-down.png" alt="runter" width="38" height="100" id="nav-down"></a><a href="equipment-index.html"><img src="grafik/nav-equip-h.png" width="128" height="100" alt="Equipment"/></a><a href="galerie-index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-bilder','','grafik/nav-bilder-h.png',1)"><img src="grafik/nav-bilder.png" alt="Bilder" width="168" height="100" id="nav-bilder"></a><a href="projekte-index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-proj','','grafik/nav-proj-h.png',1)"><img src="grafik/nav-proj.png" alt="Projekte" width="198" height="100" id="nav-proj"></a><a href="info-index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-akt','','grafik/nav-akt-h.png',1)"><img src="grafik/nav-akt.png" alt="Info - Aktuelles" width="182" height="100" id="nav-akt"></a><img src="grafik/nav-rechts.png" width="38" height="100" alt=""/></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <style type="text/css">
      body{
    background-image: url(grafik/bg_equipment.jpg);
    background-size: cover; 
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    margin: 1px;
    height: 100%;
    width: 100%;}
      </style>
      <div class="container">
      <div class="row">
        <div class="row">
  <div class="col-lg-12">

Alles anzeigen

Das wäre der Code-Schnipsel vom Oberteil... Reicht dir das zum Spielen?

Sempervivum · 10. Dezember 2020

OK, ich versuche das Mal,habe da sicher irgend ein Kachelbild ...

Jens_M · 10. Dezember 2020

Achso, Bilder des Header noch...

html-seminar.de/woltlab/attachment/2705/html-seminar.de/woltlab/attachment/2709/html-seminar.de/woltlab/attachment/2710/html-seminar.de/woltlab/attachment/2711/html-seminar.de/woltlab/attachment/2712/html-seminar.de/woltlab/attachment/2713/

Sempervivum · 10. Dezember 2020

Danke, ich habe das in der Zwischenzeit etwas anders annähernd nachgebildet.

Mit diesem CSS:

Code

        body {
            /* mein Hintergrundbild: */
            background-image: url(images/missys_water2.gif);
            /* background-size: cover; */
            background-color: #000000;
            /* background-position: center top; */
            background-attachment: fixed;
            margin: 1px;
            height: 100%;
            width: 100%;
            color: orange;
            font-weight: bold;
        }

        .container-fluid.fixed-top {
            background-image:
                /* mein Hintergrundbild, um deinen Farbverlauf 
                im Hintergrund der Nav nachzubilden: */
                url(images/orange-gradient-2.png),
                /* das selbe Hintergrundbild wie bei body: */
                url(images/missys_water2.gif);
            background-size:
                /* fuer den Farbverlauf: */
                100% 100%,
                /* fuer meinen Hintergrund */
                auto auto;
        }

Alles anzeigen

funktioniert es einwandfrei, siehe hier:

html-seminar.de/woltlab/attachment/2715/

Unter dem Header verschwindet die Schrift des Hauptinhaltes und der Hintergrund setzt sich ohne Unterbrechung fort.

Für deinen Fall umgeändert müsste das CSS so aussehen:

Code

        /* body unveraendert */
        body{
            background-image: url(grafik/bg_equipment.jpg);
            background-size: cover; 
            background-color: #000000;
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
            margin: 1px;
            height: 100%;
            width: 100%;
        }

        .container-fluid.fixed-top {
            background-image:
                /* dein Hintergrundbild: */
                url(grafik/bg_equipment.jpg);
                background-repeat: no-repeat;
                background-position: center top;
                background-size: 100% auto;
       }

Alles anzeigen

Nachdem ich das so weit geschrieben habe, ist mir eingefallen, dass Du background-size: cover; für body hast. Das könnte das Ganze scheitern lassen. Versuche es erst Mal so. Möglicher Weise müssen wir dann die horizontale Breite auch für body auf 100% setzen und repeat in der Vertikalen zulassen, falls der Hauptinhalt zu hoch wird.

Sempervivum · 10. Dezember 2020

PS: Eine Tabelle ist in diesem Fall eher weniger angebracht aber weil Bootstrap nicht so meine Baustelle ist und ich dir keine Alternative angeben kann, lassen wir es erst mal dabei.

Jens_M · 10. Dezember 2020

Okay, suppi, ich versuch das gleich la einzubauen!

Danke erstmal, Ergebnis poste ich dann

Jens_M · 10. Dezember 2020

So, hab das mal eingebaut, es tut sich nix. Offenbar wird der Style der überhaupt nicht beachtet, ich seh im fluid container rein gar keine änderung, nicht mal ein verzerrtes bild. wahrscheinlich wird da von woanders was vererbt???

Sempervivum · 10. Dezember 2020

Hm, müsste man mal live sehen. Irgend wann wirst Du ohnehin Webspace brauchen und für die Entwicklung ist es auch angebracht, so wie jetzt. bplaced.net ist für den Anfang ganz gut und kostenlos.

Hast Du denn noch mehr CSS? Ich dachte, Du hättest nur das von Bootstrap und das, was Du in #7 gepostet hattest?

Jens_M · 10. Dezember 2020

Hab dir den Link gschickt...

Sempervivum · 11. Dezember 2020

Mit mix-blend-mode funktioniert es sehr gut, allerdings musste ich etwas tun, was ich nicht so gern tue, nämlich zwei Hilfcontainer einführen:

HTML

<body>
    <div class="help-container-1">
        <div class="help-container-2">
            <div class="container-fluid fixed-top">
                <div class="row">
                    <div class="row">
                    </div>
                    <div class="col-lg-12eq">
                        <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- hier dein Navigation -->
                        </table>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="row">
                        <div class="col-lg-12">
                            Lorem ipsum dolor sit amet,
<!-- hier gekürzt -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Alles anzeigen

Code

        html,
        body {
            height: 100%;
        }

        body {
            overflow: hidden;
            margin: 1px;
            color: orange;
            font-weight: bold;
        }

        .help-container-1 {
            overflow: hidden;
            /* mein Hintergrundbild: */
            background-image: url(dein-hintergrundbild.jpg);
            background-size: cover;
            background-color: #000000;
            /* background-position: center top; */
            /* background-attachment: fixed; */
            position: relative;
            height: 100%;
        }

        .help-container-2 {
            padding-top: 150px;
            height: 100%;
            mix-blend-mode: hard-light;
            overflow-y: scroll;
        }

        .help-container-2::after {
            position: absolute;
            content: "";
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            background: linear-gradient(grey, grey 100px, transparent 150px, transparent);
            pointer-events: none;
        }

Alles anzeigen

Jens_M · 11. Dezember 2020

Guten Morgen!

Werd ich heute mal versuchen einzubauen, bin mal gespannt!

CS!

Jens

Sempervivum · 11. Dezember 2020

Noch etwas erfreuliches: Ich habe es auf meinem Handy ausprobiert und auch dort funktioniert es, wenn ich

<meta name="viewport" content="width=device-width, initial-scale=1.0">

im Head einfüge. Hintergrund steht fest ohne background-attachment.

Samsung-Browser auf Android.

prodev · 11. Dezember 2020

Zitat von Sempervivum

PS: Eine Tabelle ist in diesem Fall eher weniger angebracht aber weil Bootstrap nicht so meine Baustelle ist und ich dir keine Alternative angeben kann, lassen wir es erst mal dabei.

Das stimmt. Tabellen habe ich für Design eigentlich noch nie benutzt. Das hat man früher so gemacht, heute würde ich eher Grid nehmen. Jens_M schau dir doch mal die Navigation von Bootstrap an, ich denke, das ist besser (kannst du ja per CSS noch farblich anpassen, und ist im Gegensatz zu der Tabelle responsive).

Kurz noch was: der Sinn von Bootstrap sind die Komponenten, die es mit sich bringt. Wenn du alles selbst codest, brauchst auch kein Bootstrap mehr.

Das:

Code

onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav-bilder','','grafik/nav-bilder-h.png',1)

würde ich durch CSS :hover ersetzen, und nicht mit Bildern machen (ist schlecht für Screenreader und responsive Design).

Jens_M · 12. Dezember 2020

Ohje..., da brummt der Schädel...

Danke erstmal für die Hinweise. Wie geagt, ich bin erst mal wieder beim Lernen und mit 50+ ist das gar nicht mehr so einfach :-/ Ich habe auch schon versucht, den Bildwechsel in der Navigation durch den Effekt fade im verhalten-Menü von Dreamweaver zu steuern, geht aber nicht... Wie müsste denn der Befehl aussehen, um z.B. einen sauberen fade von 500ms beim onMouseOver und Out hinzubekommen? ich habe den Seitenaufbau jetzt modifiziert, um keinen mehr allzu vertikalen Aufbau mehr drin zu haben (scrollen). Wie gesagt, das ist eine einfache Hobbypage die ich einfach etwas aufhübschen möchte, damit es nicht ganz so altbacken aussieht. Die vielen Videos be YouTube die ich sah, überfordern mich, sorry...

CS!

Jens

Bewegliche Elemente hinter transparentem Bild verstecken?

Jetzt mitmachen!

Teilen