Filter entfernen bei höherer Ebene
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
berechnen
bild
browser
code
container
enthaltenden containers
festlegen
filter
hintergrund
http
image
index
moment
position
problem
rand
schachtel
setzen
url
verpassen
-
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
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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. -
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.
Das dachte ich auch erst – zuvor hatte ich folgende Lösung:
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.
#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
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:[…]
Vielen Dank für den Link, er ist in der Tat sehr hilfreich.
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. -
funnyweb 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.
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.
Beitrag zuletzt geändert: 10.12.2015 22:35:31 von davidlw -
davidlw schrieb:
[…]
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?
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 23:25:52 von funnyweb -
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 -
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");?>
-
davidlw schrieb:
War für mich auch ein Aha-Moment, als ich das damals gefunden hab :D
Tausend dank! So werde ichs machen.
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.
test42test schrieb:
Wenn man das weglässt, erscheint der Container unter dem Bild mit blauem (skyblue) Hintergrund.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");?>
Das PHP kann man klar so vereinfachen, nur ich habe es extra nicht gemacht, weil ich die Variable noch für andere Sachen brauche. -
Dagegen hilf ein position:fixed wenn du es nicht gescrollt haben möchtest oder position:absolute;top:0px
-
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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
