Verwenden von Hintergrund-Anhang: behoben in Safari auf dem ipad

Ich bin auf der Suche nach einem Effekt ähnlich der beliebten Wissenschaft App. Grundsätzlich haben Sie ein großes Hintergrundbild und dann noch eine HTML/CSS-Ebene. Wenn der Benutzer den Inhalt scrollt, sollte die Hintergrundposition des Bilds beibehalten und nicht geblättert werden.Verwenden von Hintergrund-Anhang: behoben in Safari auf dem ipad

Offensichtlich in einem 'normalen' Browser würde ich Hintergrund-Anhang verwenden: behoben, aber das scheint nicht auf dem iPad zu arbeiten. Ich weiß, dass Position: Fixed nicht so funktioniert, wie Sie es nach Safari-Spezifikationen erwarten würden - aber gibt es einen Weg, dies zu erreichen?

Quelle

2010-06-10 chris_bcn

Mögliche Duplikat [Fixed Hintergrundbild mit ios7] (http://stackoverflow.com/questions/20443574/fixed-background- image-with-ios7) –

Ich glaube, Sie können das Hintergrundbild in einem Div platzieren und den Z-Index hinter anderen Inhalt angezeigt. Danach können Sie Javascript verwenden, um die Position des div, das das Hintergrundbild enthält, zu korrigieren.

Quelle

2011-08-05 05:12:02 Alexander

Mobile Safari skaliert Ihre gesamte Website auf die Darstellungsgröße, einschließlich des Hintergrundbildes. Um die richtige Wirkung zu erzielen, verwenden Sie die -webkit-Hintergrund-size CSS-Eigenschaft zu Ihrem Hintergrund Größe zu erklären:

-webkit-background-size: 2650px 1440px;

(Hut Spitze Commenter Mac)

Quelle

2011-08-11 20:55:54 codewrangler

Funktioniert nicht, versuchte es auf iPad 1. –

Es löste mein Problem auf IPad3 Retina/IOS8. Danke –

Sie diesen Code verwenden können, um einen festen Hintergrund zu machen Schicht, um dieses Problem zu hacken.

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: 100%; 
    background-image: url('xx.jpg'); 
    background-attachment: fixed; 
}

Und setzen <div id="background_wrap"></div> in <body></body>

<body> 
<div id="background_wrap"></div> 
</body>

Quelle

2012-10-07 16:17:31 Angolao

nächste Lösung in Css:

body { 
    background-image: url(../images/fundobola.jpg); 
    background-position: top center;background-repeat:no-repeat; 
    background-size: 1900px 1104px; 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
}

--- nicht verwenden ---- (Ursache: scroll disable)

position: fixed

Gelöst in Ipad und iPhone

Quelle

2012-10-12 14:21:47

... aber '-moz-' ist der Mozilla, nicht iPhone (= Webkit) Präfix? –

Funktioniert überhaupt nicht. Auch was hat 'font-family: Arial;' und Ränder am Körper mit der Lösung zu tun? – Rocco

Erweitern auf Anlais Antwort oben, fand ich, dass Lösung mein Bild wiederholte, als ich scrollte, anstatt es fest zu halten. Wenn jemand dieses Problem mein CSS für die background_wrap ID hat, ist wie folgt:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

veränderte einfach die Hintergrundgröße und Hintergrund Befestigung an das Bild statisch zu machen.

Quelle

2015-01-13 09:39:46 lg365

Ich bin nicht der Profi, aber ich habe dieses Problem usin 'Jquery gelöst. Es ist ganz einfach) Hier ist der Code:

\t jQuery(window).scroll(function(){ 
 
\t \t var fromtop = jQuery(window).scrollTop(); 
 
\t \t jQuery(" your element ").css({"background-position-y": fromtop+"px"}); 
 
\t });

Quelle

2017-01-25 21:34:25 John

Verwenden von Hintergrund-Anhang: behoben in Safari auf dem ipad

Antwort

Verwandte Themen