DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die background-attachment-Eigenschaft in CSS gibt an, wie der Hintergrund relativ zum Viewport verschoben wird.
Es gibt drei Werte: scroll, fixed und local. Am besten lässt sich dies anhand einer Demo erklären (versuchen Sie, die einzelnen Hintergründe zu scrollen).
Siehe den Pen Background attachment demo von Timothy Miller (@tjacobdesign) auf CodePen.
Es gibt zwei verschiedene Ansichten, über die man sprechen kann, wenn man über background-attachment spricht: die Hauptansicht (Browserfenster) und die lokale Ansicht (man kann dies in der obigen Demo sehen).
scroll ist der Standardwert. Er scrollt mit der Hauptansicht, bleibt aber innerhalb der lokalen Ansicht fixiert.
fixed bleibt egal was passiert, fixiert. Es ist ein bisschen wie ein physisches Fenster: Wenn man sich im Fenster bewegt, ändert sich die Perspektive, aber nicht, wo sich die Dinge außerhalb des Fensters befinden.
local wurde erfunden, weil der Standardwert scroll wie ein fixierter Hintergrund wirkt. Er scrollt sowohl mit der Hauptansicht *als auch* mit der lokalen Ansicht. Es gibt einige ziemlich coole Dinge, die man damit machen kann.
Verwandt
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
Weitere Ressourcen
Browser-Unterstützung
Die Werte fixed und scroll werden überall unterstützt, obwohl fixed auf Mobilgeräten seltsam funktionieren kann. local hat diese Browserunterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, das mehr Details hat. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.2-4.3 | 12.2-12.5 |
Chrome auf Android unterstützt local, der alte Android-Browser jedoch nicht.
Hallo, ich bin ein großer Fan Ihrer Website und Tutorials!
Ich arbeite an dieser Website: http://nest.gov.ph/visitors und habe einen fixierten Hintergrund im unteren Bereich und auch auf der About-Seite, ähnlich einem Parallax-Effekt, aber nicht ganz. Mein Problem ist, dass es auf dem Desktop funktioniert, aber auf Tablets und Mobilgeräten scrollt der Hintergrund einfach mit dem Inhalt. Wie kann ich das auf diesen Geräten zum Laufen bringen? Haben Sie ein Tutorial dazu? Danke
Sie können dies manuell in den Media Queries in der CSS-Datei anpassen.
Vorsicht, dies funktioniert nicht auf mobilen / Tablet-Geräten -> Chrome Android
Danke
https://tipscodeblog.wordpress.com/
Es gibt einen Fehler in Chrome 53 auf Mac, der bewirkt, dass background-attachment: local nicht funktioniert, es sei denn, Sie setzen auch border-radius für dieses Element. Und der Wert für border-radius muss größer als 0 sein.
Chrome 51 unter Windows 10 hat den gleichen Fehler.
Mehr hier: http://www.quirksmode.org/blog/archives/2016/07/the_backgrounda.html
Es gibt einen Fehler in Firefox 59, der die Seite ruckelig macht, wenn man über ein Element mit background-attachment: fixed scrollt.
Fehlerstatusbericht hier: https://bugzilla.mozilla.org/show_bug.cgi?id=1418923
... wenn Sie auch einen CSS-Filter auf das Element angewendet haben, das ist.