Beim Festlegen eines Hintergrundbildes für ein Seitenelement mit CSS können Sie seine Position mit "background-position" steuern. Ein oft vergessener Trick ist jedoch, dass Sie sein Positionsverhalten mit "background-attachment" steuern können.
Mithilfe von zwei Bildern können wir einen ziemlich einfachen und unterhaltsamen CSS-Trick anwenden, den ich als "Unschärfe-Effekt im Hintergrund" bezeichne. Hier sind die Ergebnisse
Was Sie auf diesem Bild nicht sehen, ist, dass sich der weiße Hauptinhaltsbereich beim Vergrößern und Verkleinern des Browserfensters zentriert, während die farbigen Bleistifte fixiert bleiben. Aber überall dort, wo der weiße Hauptinhaltsbereich die Bleistifte abdeckt, erscheinen sie verblasst und unscharf, wie durch Milchglas.
Der Trick
Der Trick besteht darin, dass wir zwei verschiedene Hintergrundbilder verwenden. Die vollständige, scharfe, farbenfrohe Version ist auf das Body-Element gesetzt, während das verblasste, unscharfe Bild auf den Hauptinhalts-Div-Wrapper gesetzt ist. Um sie an derselben festen Position genau gleich zu positionieren, setzen Sie die background-attachment-Eigenschaft des Divs auf "fixed". Hier ist das relevante CSS
body {
background: url(images/bg-solid.jpg) no-repeat;
}
#page-wrap {
background: url(images/bg-blurry.jpg) no-repeat fixed;
width: 500px; margin: 40px auto;
}Manchmal haben die einfachsten Tricks die besten Ergebnisse!
Ich habe diesen Trick zuerst von Roy gezeigt bekommen, der mich auf diese Website verwiesen hat.
Wow, was für eine geniale Technik! Ich liebe die Tatsache, dass sie so einfach ist und dennoch einen so "komplexen" und interessanten Effekt erzeugt. Zugegeben, sie ist einfach, aber ich würde niemals selbst darauf kommen, nicht in einer Million Jahren!
Super .. das war wirklich genial ..
und ich habe Glück, es hier zuerst gefunden zu haben!
oh.. knapp den ersten Platz verpasst! :P
Ich liebe einfache Techniken wie diese, die mit großem Effekt eingesetzt werden. Danke für das Posten, Chris!
Nur eine Idee, aber könntest du auch dein bg-blurry.jpg zu einem halbtransparenten weißen GIF machen? Dann würde es auf jedem Bild funktionieren.
Halbtransparente weiße Überlagerungen erzeugen einen leicht anderen Effekt. Probieren Sie es selbst aus und sehen Sie!
Das ist eine Idee, aber
1) Es müsste ein PNG mit Alpha-Transparenz sein. GIFs unterstützen keine Alpha-Transparenz.
2) Es würde nicht wirklich "verschwimmen", es würde nur "verblassen".
Außerdem wäre ein PNG-Hack für IE-Browser erforderlich
Der Compex Spiral ist das erste Beispiel, das ich je von so etwas gesehen habe. Es ist eine ziemlich clevere Methode, um einen so coolen Effekt zu erzielen.
Wow, geniale Technik
Hallo,
danke für den Artikel, es ist ein raffinierter, genialer CSS-Effekt ::) Sehr geschätzt.
Ist es nur bei mir so oder bricht diese Technik ab, wenn man nach unten scrollen muss? Schade, denn sie ist ziemlich süß.
Ah ja, gute Beobachtung, ich hatte nicht genug Inhalt für das Scrollen. Was Sie tun könnten, ist, die feste Position auch auf den Body-Hintergrund anzuwenden, wodurch sie zusammenbleiben.
Genau, der Autor hat dasselbe auf seiner Website gemacht, sowohl Body als auch Page-Wrap haben feste Hintergründe.
Das ist großartig. Danke nochmals Chris für deine wunderbaren Tipps!
Frohe Weihnachten
Danke für den Artikel, interessante Sache. Prost!
Sieht aus wie eine Variation von Complex Spiral Distorted (veröffentlicht am 23. Februar 2002), bei dem beide Hintergründe fixiert werden, um das Scrollen des Inhalts zu ermöglichen. Ich frage mich, ob die Leute von Bomb Squad die Idee daher hatten.
Sehr wahrscheinlich, da bin ich sicher. Definitiv keine neue Idee, du hast das offensichtlich schon gerockt, bevor ich überhaupt wusste, wofür "CSS" steht =).
Tolles Weihnachtsgeschenk, danke!
Ich liebe diesen Effekt. Hier steckt viel Potenzial für Easter Eggs und versteckte Überraschungen auf Ihrer Website. Muss noch mehr experimentieren.
Wie wird dieser Effekt unter IE6 funktionieren? IE6 ist normalerweise nicht sehr glücklich über feste Elemente, obwohl es nichts ist, womit ich viel Erfahrung habe, feste Position, das heißt.
Ich habe gerade IE 7 geöffnet und es hat einwandfrei funktioniert (außer bei den abgerundeten Ecken, da Chris die Attribute moz-border-radius und webkit-border-radius verwendet). Danke für den Tipp, Chris!
IE6 hat ein Problem mit
position:fixed;, aber ich habe nie gesehen, dass es Probleme mit der Fixierung von Hintergrundelementen hätte :-)Cool und danke für die Antwort John :-) Das ist eine ziemlich interessante Antwort
Ich habe es in IE6 eingefügt und es hat das gleiche Problem wie Complex Spiral Distorted. Vielleicht könnte etwas JavaScript es für IE beheben? Aber dann ist es nicht mehr so einfach...
Ein toller Effekt, aber ich wünschte, ich könnte herausfinden, wie ich das mit Code erreichen kann (nicht mit der CSS-gerichteten Unschärfe), sodass keine separaten Bilder benötigt würden.
Man kann etwas Ähnliches mit reinem CSS erreichen
filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
Es "verschwimmt" den Hintergrund nicht, aber es macht ihn transparent. Es funktioniert auch in den meisten gängigen Browsern. Es ist nicht ganz der gleiche Effekt, aber es ermöglicht ein Nicht-Bild-Design. Ein Live-Beispiel finden Sie hier: 175amonthman.com. Guter Tipp; danke!
Danke. Das sind sehr nützliche Tricks.
wow! danke für diesen einfachen und genialen Trick! =)
Sieht ein bisschen problematisch aus mit Opera 10 Alpha, scrollen Sie nach unten und schauen Sie sich das an :P
sehr cool und rechtzeitig
danke mann
/trace
So einfach, aber so effektiv, danke dafür, mein Freund :)
Sehr schön! Danke
Dieses Beispiel ist dumm, weil es unter IE6 nicht funktioniert und POPOEVER Recht hat, weil es nicht funktioniert, wenn man mit Opera oder Firefox nach unten scrollt.
Versuch es noch mal, Kumpel...
Kumpel! Diese Seite heißt "CSS-TRICKS"... Chris zeigt uns hier einen interessanten Trick, den wir nie kannten. Wenn Sie immer noch einen Browser wie IE.6 verwenden? Ich schlage vor, Sie aktualisieren ihn. Und sowieso haben wir alle hier bei css tricks uns vollständig von IEs beschissenen Browsern befreit. Und wenn Sie diesen netten Trick dumm finden? Ich schlage vor, Sie machen selbst einen und zeigen ihn uns.
Gute Technik... Danke
Ich dachte, das sei etwas schwierig, aber als ich den Trick sah, erkannte ich, dass es nichts zu verstehen gab := )
Wenn IE6 immer noch der meistgenutzte Browser ist, sehe ich nicht, wie dieser Effekt für irgendjemanden nützlich ist, es sei denn, er möchte IE6-Benutzer ausschließen. Dies funktioniert NICHT in IE6.
Vor einer Weile habe ich etwas Ähnliches gemacht, um einen unscharfen Hintergrund für Drag&Drop-Fenster zu simulieren, die von JS animiert werden. Schauen Sie sich das an: Demo
Wow, sieht wirklich cool aus, wie hast du das gemacht, ich meine, das Drag and Drop?
Sie müssen den Offset zwischen Box und Cursor beim mousedown speichern und dann beim mousemove die Position der Box mit diesem Offset zur Mausposition berechnen. Um den Unschärfeeffekt zu erzielen, verwenden Sie im Grunde die gleiche Methode wie hier beschrieben, aber mit einem CSS-Trick namens CSS Sprites, berechnet von JS, wie in der Funktion dotheMoves zu sehen ist. (Schauen Sie sich die Quelle an)
Beim mouseup müssen Sie Ihre Bewegungsfunktion deregistrieren und fertig.
(Sie können nicht nur den Positions-Offset speichern, sondern auch die Rahmenfarbe usw., wenn Sie das während der Bewegung ändern möchten)
Großartige Arbeit.
sehr schön!
Ich folge Ihrer Website über RSS.
Es ist ein schöner Effekt, aber wie Eric und xbakesx sagten, wurde das schon einmal gemacht, vor langer Zeit. Ich war fasziniert von dem Complex Spiral Beispiel, als ich es sah, als ich noch ziemlich neu in CSS war.
Netter Effekt.
Allerdings funktioniert Ihre Demo-Seite nicht unter Google Chrome.
Der andere Link funktioniert in Chrome hervorragend.
Der feste Hintergrund-Anhang im Body-Tag sollte das beheben.
Das sieht großartig aus, der IE-Fix ist nur ein HTC, das ihm sagt, wie er PNG-Dateien behandeln soll. Ich werde es ausprobieren und sehen, wie es auch mit meiner Website funktioniert.
Schön! Muss es ausprobieren
Mann... dafür bekommt man absolut keine Anerkennung. Was für ein mieser Trick! Mehrere Hintergrundbilder, und versuche, die Demo-Seite wirklich kurz zu machen und zu scrollen. Voller Lücken.
Danke, dass du die anderen Kommentare und Antworten gelesen hast, bevor du gepostet hast!
Danke, dass du das ganze Zeug geteilt hast.
Diese Lösung ist nicht nutzbar für Websites mit Inhalten, die länger sind als die tatsächliche Bildschirmhöhe. Wenn Sie ein wenig nach unten scrollen, hat das unscharfe Bild eine feste Position von 40 Pixel von oben in Bezug auf den aktuellen Viewport. Es muss um den Scrollbetrag nach oben verschoben werden. Das kann einfach mit JavaScript gemacht werden.
Der jQuery-Code könnte so aussehen. Getestet in IE 8, 9, neuestem Chrome und Firefox.
Auf jeden Fall... Die Lösung ist weit über den Lösungen, die ich gesehen habe. Tolle Arbeit =)
Diese Demo wurde mir auf der Public-fx-Mailingliste gezeigt. Der Wunsch ist, einen ähnlichen Effekt zu erzielen, aber nur mit einem Bild. Dies ist die Listenmeldung (von letztem Jahr) und sie wird in letzter Zeit in diesem Thread und diesem Thread diskutiert.
Hier ist mein Versuch mit nur einem Bild, das 'element()' und CSS-Filter verwendet. Könnte viel besser sein.
So einfach! Ich hatte anfangs ein kleines Problem, da ich "background-size:cover;" nicht auf eines meiner Bilder angewendet sah. Nachdem ich es auf das neue unscharfe Bild angewendet hatte, funktionierte es. Toller Trick!