kostenloser Webspace werbefrei: lima-city


Filter entfernen bei höherer Ebene

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    Hallo,

    Teile meines dynamischen CSS sehen so aus:
    #overlay{
    	min-height: 100%;
    	width: 100%;
    	z-index: 2;
    	-webkit-filter: none;
    	-moz-filter: none;
    	-o-filter: none;
    	-ms-filter: none;
    	filter: none;
    }
    body{
    	overflow-x: hidden;
    	background-color: skyblue;
    	background-image: url('bg<?php if(rand(0,1)==1) $blur=true; if($blur) echo("2");?>.jpg');
    	background-size: cover;
    	background-attachment: fixed;
    	background-position: center center;
    	<?php if($blur) echo("-webkit-filter: blur(10px);
    	-moz-filter: blur(10px);
    	-o-filter: blur(10px);
    	-ms-filter: blur(10px);
    	filter: blur(10px);"); ?>
    	width: 100%;
    	z-index: 0;
    }

    und das ist mein HTML:
    <body>
    <div id="overlay">
    <div id="main">
    […]
    </div>
    <footer>
    […]
    </footer>
    </div>
    </body>

    Um es kurz zu erläutern: Es soll zwischen zwei Hintergrundbildern (bg.jpg und bg2.jpg) zufällig eins ausgewählt werden und nur falls bg2.jpg ausgewählt wird, soll dem Hintergrundbild Unschärfe verpasst werden. So weit, so gut, es klappt eigentlich alles. Mit dem einen Fehler: Wenn bg2.jpg ausgewählt wurde, dann wird nicht nur der Hintergrund unscharf, sondern ALLES, also auch alles im Overlay und im Footer. Wie löst man das Problem?

    Lieben Dank
    lustiges Internet
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Warum verpasst Du bg2.jpg nicht einfach mittels eines Bildbearbeitungsprogramms ein bisschen Unschärfe? Wenn du eh nur das Bild unscharf haben willst, muss man das ja nicht den Browser berechnen lassen.
    Wenn Du bei Deiner Lösung bleiben willst, darfst Du das overlay und Main halt nicht schachteln, siehe http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image

    Edit: vergiss das mit dem Schachteln, hatte übersehen, dass der Hintergrund ja beim body gesetzt wird. Der Link sollte aber trotzdem hilfreich sein.

    Beitrag zuletzt geändert: 10.12.2015 21:04:37 von davidlw
  4. Das wiederspricht eigentlich der Idee von CSS, dass die Eigenschaften an die untergeordneten Elemente vererbt werden.

    Am einfachsten kannst du es umgehen, indem du das Hintergrundsbild (den Filter) nicht im <body> hast, sondern einen <div> nimmst, den du in den Hintergrund setzt.

    Warum generierst du dein CSS mit PHP und versuchst nicht verschiedene Klassen dafür zu machen? Dann könnte der Browser die CSS auch cachen.
  5. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    davidlw schrieb:
    Warum verpasst Du bg2.jpg nicht einfach mittels eines Bildbearbeitungsprogramms ein bisschen Unschärfe? Wenn du eh nur das Bild unscharf haben willst, muss man das ja nicht den Browser berechnen lassen.
    […]
    weil das Bild, wenn man runterscrollt, unterhalb des Footers scharf werden soll – und zusätzlich, um das Prinzip besser zu verstehen.

    test42test schrieb:
    Das wiederspricht eigentlich der Idee von CSS, dass die Eigenschaften an die untergeordneten Elemente vererbt werden.

    Am einfachsten kannst du es umgehen, indem du das Hintergrundsbild (den Filter) nicht im <body> hast, sondern einen <div> nimmst, den du in den Hintergrund setzt.
    Das dachte ich auch erst – zuvor hatte ich folgende Lösung:

    #overlay{
    	padding: 50px;
    	background-color: rgba(0,0,0,0.3);
    	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.35),rgba(0,0,0,0.3),rgba(0,0,0,0.35),rgba(0,0,0,0.3),rgba(0,0,0,0.0));
    	min-height: 100%;
    	width: 100%;
    	z-index: 2;
    	position: absolute;
    	margin-top: -1080px;
    }
    body{
    	overflow-x: hidden;
    	background-color: skyblue;
    }
    #hintergrund{
    	background-image: url('bg<?php if(rand(0,1)==1) $blur=true; if($blur) echo("2");?>.jpg');
    	background-size: cover;
    	background-attachment: fixed;
    	background-position: center center;
    	<?php if($tafel) echo("-webkit-filter: blur(10px);
    	-moz-filter: blur(10px);
    	-o-filter: blur(10px);
    	-ms-filter: blur(10px);
    	filter: blur(10px);"); ?>
    	min-height: 1080px;
    	height: 100%;
    	width: 100%;
    	z-index: 0;
    }
    <body>
    <div id="hintergrund"></div>
    <div id="overlay">
    <div id="main">
    […]
    </div>
    <footer>
    […]
    </footer>
    </div>
    </body>


    Da kam dann aber das Problem, dass der <div> zwar im Browser mit der vollen Breite, aber einer Höhe von 0px gerendert wird. Somit war der Hintergrund dann einfach skyblue. Wenn es eine Lösung gibt, wie man die volle Fensterhöhe als Container-Höhe festlegen kann – vorzugsweise nur mit CSS und ohne JS – wäre das natürlich eine elegantere Lösung. Ich habe als Notlösung zwischendurch zum Testen eine (min-)height von 1080px festgelegt, allerdings musste ich dem Overlay-Container dann ja auch einen margin-top von -1080px verpassen und das ist ja kein vernünftiger Codingstil.

    Warum generierst du dein CSS mit PHP und versuchst nicht verschiedene Klassen dafür zu machen? Dann könnte der Browser die CSS auch cachen.
    Weil ich noch ein Anfänger bin und daran nicht gedacht habe :shy: danke für den Tipp – meinst Du z. B. so?

    .overlay{
    	padding: 50px;
    	background-color: rgba(0,0,0,0.3);
    	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.35),rgba(0,0,0,0.3),rgba(0,0,0,0.35),rgba(0,0,0,0.3),rgba(0,0,0,0.0));
    	min-height: 100%;
    	width: 100%;
    	z-index: 2;
    	position: absolute;
    	margin-top: -1080px;
    }
    body{
    	overflow-x: hidden;
    	background-color: skyblue;
    }
    #hintergrund{
    	background-size: cover;
    	background-attachment: fixed;
    	background-position: center center;
    	min-height: 1080px;
    	height: 100%;
    	width: 100%;
    	z-index: 0;
    }
    .blur
    {
    	background-image: url('bg2.jpg');
    	-webkit-filter: blur(10px);
    	-moz-filter: blur(10px);
    	-o-filter: blur(10px);
    	-ms-filter: blur(10px);
    	filter: blur(10px);
    }
    .noblur
    {
    	background-image: url('bg.jpg');
    }
    <body>
    <div id="hintergrund" class="<?php if(rand(0,1)==1) $blur=true; if(!$blur) echo("no");?>blur"></div>
    <div id="overlay">
    <div id="main">
    […]
    </div>
    <footer>
    […]
    </footer>
    </div>
    </body>


    Vielen Dank jedenfalls für Deine Hilfe!

    davidlw schrieb:
    […]
    Wenn Du bei Deiner Lösung bleiben willst, darfst Du das overlay und Main halt nicht schachteln, siehe http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image

    Edit: vergiss das mit dem Schachteln, hatte übersehen, dass der Hintergrund ja beim body gesetzt wird. Der Link sollte aber trotzdem hilfreich sein.
    Vielen Dank für den Link, er ist in der Tat sehr hilfreich.
  6. funnyweb schrieb:
    Da kam dann aber das Problem, dass der <div> zwar im Browser mit der vollen Breite, aber einer Höhe von 0px gerendert wird. Somit war der Hintergrund dann einfach skyblue. Wenn es eine Lösung gibt, wie man die volle Fensterhöhe als Container-Höhe festlegen kann – vorzugsweise nur mit CSS und ohne JS – wäre das natürlich eine elegantere Lösung. Ich habe als Notlösung zwischendurch zum Testen eine (min-)height von 1080px festgelegt, allerdings musste ich dem Overlay-Container dann ja auch einen margin-top von -1080px verpassen und das ist ja kein vernünftiger Codingstil.
    Entweder setzt Du body und html auch auf height: 100%, oder Du verwendest nicht Prozent, sondern vh (Viewport Height). 100vh entsprechen auch genau der Fensterhöhe und sind unabhängig von der Größe des enthaltenden Containers.

    Beitrag zuletzt geändert: 10.12.2015 22:35:31 von davidlw
  7. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    davidlw schrieb:
    […]
    Entweder setzt Du body und html auch auf height: 100%, oder Du verwendest nicht Prozent, sondern vh (Viewport Height). 100vh entsprechen auch genau der Fensterhöhe und sind unabhängig von der Größe des enthaltenden Containers.
    Danke, das ist ja genial mit dem vh und vw und vmin und vmax! Gibt es eigentlich auch eine Möglichkeit, an die Höhe des gerenderten Dokuments zu kommen? Also nicht nur des Fensters, sondern der ganzen Seite?

    Beitrag zuletzt geändert: 10.12.2015 23:25:52 von funnyweb
  8. War für mich auch ein Aha-Moment, als ich das damals gefunden hab :D
    Hat natürlich den Nachteil, dass es nicht ganz so gut unterstützt ist, wie %. Siehe http://caniuse.com/#feat=viewport-units. Ist inzwischen aber trotzdem weit verbreitet. Wenn man ältere Browser unterstützen will, kann man die Höhe zuerst mit einer anderen Einheit setzen. Sieht dann z.B. so aus:
    height: 1080px;
    height: 100vh;
    Browser, die vh nicht unterstützen fallen so auf 1080px zurück. Darunter fällt aktuell wohl allerdings nur Opera Mini, sodass das wahrscheinlich gar nicht nötig ist.

    An die Höhe des gesamten Dokuments kommt man soweit ich weiß nur per Javascript, und zwar mit document.documentElement.scrollHeight.

    Beitrag zuletzt geändert: 10.12.2015 23:31:48 von davidlw
  9. funnyweb schrieb:
    margin-top: -1080px;

    Lass die Zeile doch mal weg und schau dann, ob es klappt.
    Bei mir funktioniert die Variante mit %

    Kann man das nicht noch vereinfachen?
    <?php if(rand(0,1)==1) $blur=true; if(!$blur) echo("no");?>
    <?php if(rand(0,1)==0) echo("no");?>

  10. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    davidlw schrieb:
    War für mich auch ein Aha-Moment, als ich das damals gefunden hab :D
    Hat natürlich den Nachteil, dass es nicht ganz so gut unterstützt ist, wie %. Siehe http://caniuse.com/#feat=viewport-units. Ist inzwischen aber trotzdem weit verbreitet. Wenn man ältere Browser unterstützen will, kann man die Höhe zuerst mit einer anderen Einheit setzen. Sieht dann z.B. so aus:
    height: 1080px;
    height: 100vh;
    Browser, die vh nicht unterstützen fallen so auf 1080px zurück. Darunter fällt aktuell wohl allerdings nur Opera Mini, sodass das wahrscheinlich gar nicht nötig ist.

    An die Höhe des gesamten Dokuments kommt man soweit ich weiß nur per Javascript, und zwar mit document.documentElement.scrollHeight.
    Tausend dank! So werde ichs machen.

    test42test schrieb:
    funnyweb schrieb:
    margin-top: -1080px;

    Lass die Zeile doch mal weg und schau dann, ob es klappt.
    Bei mir funktioniert die Variante mit %

    Kann man das nicht noch vereinfachen?
    <?php if(rand(0,1)==1) $blur=true; if(!$blur) echo("no");?>
    <?php if(rand(0,1)==0) echo("no");?>

    Wenn man das weglässt, erscheint der Container unter dem Bild mit blauem (skyblue) Hintergrund.
    Das PHP kann man klar so vereinfachen, nur ich habe es extra nicht gemacht, weil ich die Variable noch für andere Sachen brauche.
  11. Dagegen hilf ein position:fixed wenn du es nicht gescrollt haben möchtest oder position:absolute;top:0px
  12. Autor dieses Themas

    funnyweb

    Kostenloser Webspace von funnyweb

    funnyweb hat kostenlosen Webspace.

    test42test schrieb:
    Dagegen hilf ein position:fixed wenn du es nicht gescrollt haben möchtest oder position:absolute;top:0px
    Ach, natürlich! Vielen Dank.
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!