स्टाइलिंग बॉडी एलिमेंट फुलस्क्रीन में?

Question

मेरी साइट पर एक टाइलिंग पृष्ठभूमि छवि लागू है, जिसे फ़ोटो के रूप में देखा जा सकता है क्योंकि वे संक्रमण (अधिकांश फ़ोटो पृष्ठभूमि को भरते हैं)। यहां एक नज़र डालें: http://new.element17.com।

पूर्णस्क्रीन में देखा जाने पर, हालांकि (क्रोम/मोज़िला में ऊपरी दाएं बटन में बटन का उपयोग करके), यह पृष्ठभूमि छवि गायब हो जाती है और पृष्ठभूमि तब #fff होती है। मैं इसे कैसे शैलीबद्ध कर सकता हूं?

body:-webkit-full-screen {background-image:url(../images/olive.jpg);} 
body:-moz-full-screen {background-image:url(../images/olive.jpg);} 
body:-ms-full-screen {background-image:url(../images/olive.jpg);} 
body:-o-full-screen {background-image:url(../images/olive.jpg);} 
body:full-screen {background-image:url(../images/olive.jpg);} 

लेकिन यह किसी भी परिवर्तन में परिणाम नहीं करता है:

कुछ पढ़ने के आधार पर, मैं निम्नलिखित की कोशिश की है। कोई विचार?

Answer 1

मैं बहुत यकीन है कि अगर आप एक निश्चित तत्व पूर्ण स्क्रीन मोड में प्रवेश, बल्कि दस्तावेज़ वस्तु पर कर की तुलना में कर सकते हैं तो नीचे हूँ, तो आप उस से शैली।

आपको उस तत्व पर requestFullScreen विधि ट्रिगर करने की आवश्यकता होगी, जिसे आप पूर्ण स्क्रीन बनाना चाहते हैं। इस मामले में, यह रूट html तत्व है। इस विधि मैं एक साथ फेंक दिया जब मैं यह आवश्यक है:

function enter_full_screen(){ 
    elem = document.getElementsByTagName('html')[0]; 
    calls = ['requestFullScreen','webkitRequestFullScreen','mozRequestFullScreen']; 

    for(var i = 0; i < calls.length; i++){ 
     if(elem[calls[i]]){ 
      elem[calls[i]](); 
      return; 
     } 
    } 
} 

और शैलियों तो बन गयी:

:-webkit-full-screen body {background-image:url(../images/olive.jpg);} 
:-moz-full-screen body {background-image:url(../images/olive.jpg);} 
:full-screen body {background-image:url(../images/olive.jpg);} 

मैं एक साथ रख दिया कार्रवाई में यह दिखा एक त्वरित उदाहरण पेज: Example (बस भागने कुंजी का उपयोग पूर्ण स्क्रीन से बाहर करने के लिए - मैं the MDN docs पूर्ण स्क्रीन मोड पर के अनुसार, बाहर निकलें बटन के साथ परेशान नहीं किया था)

इसके अलावा, आईई का कोई संस्करण पूर्ण स्क्रीन मोड का समर्थन करता है, और ओपेरा ट्रिगर के लिए गैर-उपसर्ग के संस्करण का उपयोग करता , लेकिन नहीं छद्म वर्ग का समर्थन करें। पूर्ण स्क्रीन में प्रवेश करते समय आप html या body तत्वों को मैन्युअल रूप से कक्षा जोड़ने पर विचार करना चाहेंगे, और जब आप ओपेरा का पूर्ण समर्थन करना चाहते हैं तो इसे निकालकर इसे हटा दें।

एक और दिलचस्प तथ्य यह है: the docs कहना छद्म वर्ग के लिए छिपकली और वेबकिट उपयोग (पहले से जुड़ा हुआ) :full-screen, लेकिन वास्तविक W3C प्रस्ताव :fullscreen उपयोग करता है - शब्दों के बीच कोई पानी का छींटा। मैंने दोनों का उपयोग किया है, बस सुरक्षित होने के लिए ...

Answer 2

मुझे लगता है कि आप जो चाहते हैं उसे प्राप्त करने के लिए, #slideshow पर अपनी पृष्ठभूमि जोड़ें क्योंकि यह div है जो पूर्ण स्क्रीन पर कंटेनर है।

#slideshow { 
    background: url("../images/olive.jpg") repeat scroll 0 0 transparent; 
}