पृष्ठभूमि-अनुलग्नक का उपयोग करना: आईपैड

पर सफारी में तय मैं लोकप्रिय विज्ञान ऐप के समान प्रभाव को फिर से बनाना चाहता हूं। मूल रूप से एक बड़ी पृष्ठभूमि छवि होती है और फिर उसके ऊपर HTML/CSS परत होती है। जब उपयोगकर्ता सामग्री को स्क्रॉल करता है, तो छवि की पृष्ठभूमि-स्थिति जगह में रहनी चाहिए, और स्क्रॉल नहीं करना चाहिए।पृष्ठभूमि-अनुलग्नक का उपयोग करना: आईपैड

स्पष्ट रूप से 'नियमित' ब्राउज़र में मैं पृष्ठभूमि-अनुलग्नक का उपयोग करता हूं: निश्चित, लेकिन यह आईपैड पर काम नहीं कर रहा है। मुझे स्थिति पता है: फिक्स्ड काम नहीं करता है क्योंकि आप सफारी स्पेक के मुताबिक उम्मीद कर सकते हैं - लेकिन क्या इसे हासिल करने का कोई तरीका है?

स्रोत

2010-06-10 chris_bcn

[iOS7 साथ फिक्स्ड पृष्ठभूमि छवि] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/20443574/fixed-background- image-with-ios7) –

मेरा मानना है कि आप पृष्ठभूमि छवि को एक div में रख सकते हैं और जेड-इंडेक्स को अन्य सामग्री के पीछे प्रदर्शित करने के लिए सेट कर सकते हैं। बाद में आप पृष्ठभूमि छवि वाले div की स्थिति को ठीक करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

स्रोत

2011-08-05 05:12:02 Alexander

मोबाइल सफारी पृष्ठभूमि छवि समेत अपनी संपूर्ण साइट को इसके व्यूपोर्ट आकार पर स्केल करता है। सही प्रभाव को प्राप्त करने के लिए, अपनी पृष्ठभूमि आकार घोषित करने के लिए -webkit-पृष्ठभूमि आकार सीएसएस संपत्ति का उपयोग करें:

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

स्रोत

2011-08-11 20:55:54 codewrangler

काम नहीं करता है, इसे आईपैड पर आजमाया 1. –

यह आईपैड 3 रेटिना/आईओएस 8 पर मेरी समस्या हल कर दिया। धन्यवाद –

(टोपी टिप Mac टिप्पणीकार के लिए) आप एक निश्चित पृष्ठभूमि बनाने के लिए इस कोड का उपयोग कर सकते हैं इस समस्या को हैक करने के लिए परत।

#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; 
}

और सीएसएस में <body></body>

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

स्रोत

2012-10-07 16:17:31 Angolao

अगले समाधान में <div id="background_wrap"></div> डाल:

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; 
}

--- का उपयोग नहीं ---- (कारण: अक्षम स्क्रॉल)

position: fixed

आईपैड में हल और आईफोन

स्रोत

2012-10-12 14:21:47

... लेकिन '-मोज़-' मोज़िला है, आईफोन नहीं (= वेबकिट) उपसर्ग? –

बिल्कुल काम नहीं करता है। इसके अलावा 'फ़ॉन्ट-फ़ैमिली: एरियल' क्या है और शरीर पर मार्जिन को समाधान के साथ क्या करना है? – Rocco

ऊपर दिए गए अनलाई के उत्तर पर विस्तार करते हुए, मैंने पाया कि समाधान मेरी छवि को दोहरा रहा था क्योंकि मैं इसे ठीक करने के बजाय स्क्रॉल कर रहा था। किसी और को इस समस्या थी हैं background_wrap आईडी के लिए अपने सीएसएस इस प्रकार है:

#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; 
}

बस पृष्ठभूमि आकार और पृष्ठभूमि लगाव छवि स्थिर बनाने के लिए बदल दिया है।

स्रोत

2015-01-13 09:39:46 lg365

मैं वह प्रोफेसर नहीं हूं, लेकिन मैंने इस समस्या को हल कर लिया है 'jquery। यह काफी सरल) यहाँ कोड है:

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

स्रोत

2017-01-25 21:34:25 John

पृष्ठभूमि-अनुलग्नक का उपयोग करना: आईपैड

उत्तर

संबंधित मुद्दे