सीएसएस लंबन पृष्ठभूमि छवि आईई में

Question

मैं दो परत परत लंबन प्रभाव बनाने के लिए Keith Clark's CSS-only विधि का उपयोग कर रहा हूं ताकि पृष्ठभूमि छवि साइट की सामग्री के बाकी हिस्सों की तुलना में धीमी गति से स्क्रॉल हो। बस स्पष्ट होने के लिए, छवि पूरे पृष्ठ को कवर करती है और सामग्री इसके शीर्ष पर बैठती है।

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

.container { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    perspective: 1px; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.background { 
    background-image: url(images/background.jpg); 
    background-size: cover; 
    position: absolute; 
    /* margin-bottom: -200em; 
    overflow: hidden; */ 
    height: 200em; 
    left: 0; 
    right: 0; 
    transform: translateZ(-2px) scale(3); 
} 

.page-content { 
    transform: translateZ(0); 
} 

margin-bottom और overflow गुण के बिना कहा, पृष्ठभूमि div तत्व खड़ी सफेद स्थान बचे एक बार यह एक ऊंचाई काफी अधिक सभी पेज की सामग्री को कवर करने के लिए सेट किया गया हो रही अंत होगा।

नकारात्मक मार्जिन जोड़ने के बाद, समस्या क्रोम में तय की गई थी और फ़ायरफ़ॉक्स * में सॉर्ट किया गया था, और मैंने div तत्व की ऊंचाई और नकारात्मक मार्जिन बढ़ाया ताकि यह सुनिश्चित किया जा सके कि यह अलग-अलग पेज के लिए काम करेगा लंबाई।

आईई 11 में अभी भी सफेद जगह है। आम तौर पर background-size: cover; संपत्ति किसी भी सफेद स्थान को हटा देती है, लेकिन यह लंबन प्रभाव के साथ काम नहीं करती है।

क्या आप आईई 9 + और अन्य प्रमुख ब्राउज़रों के लिए काम करने वाली सफेद जगह को हटाने के किसी भी तरीके से जानते हैं, या मैं भाग्य से बाहर हूं?

यहां एक JSFiddle है जो कि मैं जिस साइट पर बना रहा हूं, वैसे ही बिल्कुल उसी कोड के साथ।

* फ़ायरफ़ॉक्स में सफेद स्थान नहीं है, लेकिन नकारात्मक मार्जिन सभी पृष्ठ की लंबाई के लिए ठीक से काम नहीं कर रहा है। छोटे पृष्ठों के लिए आप पेज की सामग्री के अंत को पारित कर सकते हैं। मैं प्रत्येक पृष्ठ के लिए ऊंचाई और मार्जिन को बदलकर इसका समाधान कर सकता हूं, लेकिन यदि संभव हो तो वैश्विक समाधान की सराहना की जाएगी।

Answer 1

वहाँ किसी भी तरह से सीएसएस लंबन IE में काम करने के लिए, अभी तक प्राप्त करने के लिए नहीं है। लेकिन चूंकि वेबकिट-आधारित ब्राउज़र जैसे क्रोम और ओपेरा (मैंने सफारी का परीक्षण नहीं किया है) लंबन के साथ अच्छी तरह से काम करते हैं, इसलिए वेबकिट ब्राउज़र को लक्षित करना और उनके लिए लंबन पृष्ठभूमि प्रदर्शित करना संभव है, और अन्य ब्राउज़रों के लिए लंबवत के बिना अलग कोड प्रदर्शित करना संभव है।

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    .container { 
    [rule contents] 
    } 

    .background { 
    [rule contents] 
    } 

    .page-content { 
    [rule contents] 
    } 
} 

पहले विशेषता (-webkit-min-device-pixel-ratio:0) लक्ष्य सभी WebKit- आधारित ब्राउज़र, लेकिन जब से मैं वेबकिट ब्राउज़रों के संस्करणों नहीं सभी यह मान लंबन का समर्थन करेंगे:

पहले, मैं लंबन कोड @media प्रश्नों के अंदर इस तरह रखा, प्रभाव, मैंने दूसरी विशेषता भी जोड़ा, जो ब्राउज़र को Chrome 29+ and Opera 16+ तक सीमित करता है (मैंने सफारी को सुरक्षित होने के लिए बाहर रखा है, लेकिन आप choose another hack कर सकते हैं जो सफारी को लक्षित करता है यदि आपको यह पता चलता है)।

यह शायद feature detection का उपयोग करने के लिए एक बेहतर विचार होगा, लेकिन मैंने अभी तक जावास्क्रिप्ट नहीं सीखा है, और उपरोक्त एक सीएसएस-केवल समाधान है।

@media क्वेरी में लंबन नियम डालने के बाद, मैंने div तत्व के लिए एक वैकल्पिक डिफ़ॉल्ट नियम स्थापित किया।

(सामने में साइट और वापस div तत्वों को विभाजित हालांकि बल्कि body या html से एक पृष्ठभूमि छवि के साथ वापस आ div तत्व की स्थापना, लंबन के बिना आवश्यक नहीं है अंतराल के एक टन कर देता है।)

लंबन संस्करण जितना संभव हो उतना समानता बनाए रखने के लिए, मैंने पृष्ठभूमि छवि को position: fixed पर सेट किया है।

चूंकि ब्राउज़र सीएसएस फ़ाइल ऊपर से नीचे के माध्यम से पढ़ सकते हैं और इसी क्रम में शैलियाँ लागू है, यह लंबन .back नियम (और उसके आसपास के @media क्वेरी) के बाद आ मानक, गैर लंबन में .back शासन का होना महत्वपूर्ण है फ़ाइल।

और निश्चित रूप से, मैंने यह सुनिश्चित किया है कि मानक और लंबन दोनों .back नियमों पर लागू सभी विशेषताओं केवल स्थान बचाने के लिए डिफ़ॉल्ट में मौजूद थे (वे वेबकिट ब्राउज़र द्वारा लंबवत में अतिरिक्त नियमों के साथ लागू होंगे संस्करण)।

Answer 2

मुझे लगता है कि यदि आपका लक्ष्य IE9 पर यह काम करना है तो आपको कुछ समस्याएं हैं। यह मेरे लिए काम करता है, लेकिन .back div की आकार ऊंचाई को बढ़ाए बिना नहीं।

यह आईई 9 और क्रोम में मेरे लिए काम करता है, लेकिन आप बस कुछ आईई सशर्त चाहते हैं।

http://jsfiddle.net/Lawrg9mv/21/

परिवर्धन:

.back { 
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3); 
} 

.front { 
    -ms-transform: translateZ(0); 
    z-index: 10; 
    position: relative; 
}