Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?

    NEWS

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?

    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by A Former User

      Ich kann Dir nicht ganz folgen, bei mir steht dort:

      rgba(0, 0, 0, 0) linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%) repeat scroll 0% 0% / auto padding-box border-box

      Auch wenn ich da ein "[...] none repeat scroll [...]" draus mache, ändert das leider nix 😞

      sigi234 1 Reply Last reply Reply Quote 0
      • sigi234
        sigi234 Forum Testing Most Active @Guest last edited by sigi234

        @oliver-w-leibenguth

        Hast du das genau so wie bei mir eingetragen?

        Screenshot (114).jpg

        Homoran 1 Reply Last reply Reply Quote 1
        • Homoran
          Homoran Global Moderator Administrators @sigi234 last edited by

          @sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

          @oliver-w-leibenguth

          Hast du das genau so wie bei mir eingetragen?

          Screenshot (114).jpg

          @Oliver-W-Leibenguth
          deswegen immer alles zeigen!

          1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @Guest last edited by OliverIO

            @oliver-w-leibenguth
            Alternativ geht auch im css tab das folgende einzutragen

            body {
                background-color: black;
                color: white;
            }
            

            black kann natürlich auch mit einem der Angaben da oben gefüllt werden.
            Wobei mir da einige Angaben etwas seltsam vorkommen (padding-box, der slash)
            und ob border-box mit den Angaben einiger widgets kompatibel ist?
            Hier mal zur Definition von background. Das css propertie ist auch nur eine kurzform für verschiedene einzelnen Anweisungen. Wer soviele Angaben hat, sollte evtl die auf die direkten Anweisungen aufteilen, dann wird es auch klarer was was bedeutet.
            https://developer.mozilla.org/en-US/docs/Web/CSS/background?retiredLocale=de

            Diese Anweisung bei body hat den vorteil, das es den kompletten Hintergrund betrifft.
            Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

            Homoran 1 Reply Last reply Reply Quote 2
            • Homoran
              Homoran Global Moderator Administrators @OliverIO last edited by

              Danke für die Erklärung!

              @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

              Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

              das passt exakt!
              ich hatte dann die fixen Größen zurückgenommen und der Background passte.
              Ist ewig her, aber ich glaube dafür gab's dann anderen Ärger 😂

              1 Reply Last reply Reply Quote 0
              • ?
                A Former User last edited by A Former User

                Dann müsste ein...

                body {
                    background: linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%)
                    color: white;
                }
                

                ...eigentlich den gewünschen Effekt bringen, sieht in der Realität aber so aus:

                9ea3c4d7-9ed8-46d3-81e0-b132114dc276-image.png

                das erhoffte Ergebnis ist hingegen so:

                d6702e4e-3a70-4f97-8bc6-a76ca15119c8-image.png
                (Den Farbverlauf sieht man bei dem kleinen Stück jetzt natürlich nicht wirklich...)

                OliverIO 1 Reply Last reply Reply Quote 0
                • ?
                  A Former User last edited by

                  Ich hab mir mal meine Gedanken gemacht und bin zu dem Ergebnis gekommen, dass es bei einem Farbverlauf eigentlich auch nicht funktionieren kann:
                  Der Browser verteilt die Farben auf den sichtbaren Bereich des Bildschirms, hat (bei linearen Verläufen) oben 0% und ganz unten 100% der Farben hingemalt.
                  Der Teil des Bildschirms, den ich durch Scrollen quasi nachschiebe, liegt aber in dem Bereich jenseits der 100%. Dann könnte der Browser einfach mit der letzten Farbe weitermachen, zeichnet aber dummerweise den Systemhintergrund des Browsers.

                  1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @Guest last edited by OliverIO

                    @oliver-w-leibenguth
                    ich verstehe die antwort nicht so ganz und ist sie nicht auf eine andere frage gestellt?
                    so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.
                    wenn bereiche dann nicht so dargestellt werden, dann liegt es daran, das html-elemente, die in schichten darüber liegen, wieder eigene backgrounds haben, welche die anweisungen die darunter liegen überdecken.
                    html ist hierarchisch aufgebaut. das html und body tag bilden sozusagen die untersten ebenen, jedes weitere level der verschachtelung bildet wieder eine neue ebene welche darüber liegt.
                    jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements

                    hier mal eine grafik die das etwas visualisiert
                    950aaf14-5e86-4d6c-a37c-13eab7f68034-image.png

                    ? 1 Reply Last reply Reply Quote 0
                    • ?
                      A Former User @OliverIO last edited by

                      @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                      so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.

                      ...die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

                      OliverIO Homoran 2 Replies Last reply Reply Quote 0
                      • OliverIO
                        OliverIO @Guest last edited by

                        @oliver-w-leibenguth

                        wenn du denkst du hast einen fehler in der render engine deines browser gefunden:
                        für chrome/edge
                        https://bugs.chromium.org/p/chromium/issues/list
                        firefox
                        https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox
                        safari
                        https://bugs.webkit.org/
                        Opera
                        https://help.opera.com/en/touch/report-a-problem/

                        1 Reply Last reply Reply Quote 1
                        • Homoran
                          Homoran Global Moderator Administrators @Guest last edited by

                          @oliver-w-leibenguth sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                          die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

                          wobei immer noch die Frage offen ist

                          @sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                          Hast du das genau so wie bei mir eingetragen?

                          und auch CSS in Ebenen aufgebaut ist, wo

                          @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                          jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          406
                          Online

                          32.0k
                          Users

                          80.5k
                          Topics

                          1.3m
                          Posts

                          4
                          13
                          380
                          Loading More Posts
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes
                          Reply
                          • Reply as topic
                          Log in to reply
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                          The ioBroker Community 2014-2023
                          logo