सीएसएस में लेयरिंग छवियां - एक ही तत्व में 2 छवियों को रखना संभव है?

Question

मान मैं इस तरह सीएसएस में एक वेब पेज के लिए एक पृष्ठभूमि छवि सेट कर रहा हूं:

body { 
font-size: 62.5%; /* Resets 1em to 10px */ 
font-family: Verdana, Arial, Sans-Serif; 
background-color: #9D5922; 
color: #000; 
margin-left: auto; 
margin-right: auto; 
margin: 0; 
padding: 0; 
background: url(images/desk.gif) repeat bottom left; 
} 

शरीर तत्व के भीतर desk.gif खुद के शीर्ष पर एक दूसरी छवि परत कोई तरीका है, या है एक अलग वर्ग बनाने और जेड अक्ष का उपयोग करने का एकमात्र तरीका?

क्षमा करें, यह एक सरल सवाल है, लेकिन मैं इसे समझने की कोशिश कर रहा हूं और हालांकि मैं इसे काम करने में सक्षम नहीं हूं, मुझे भी कहीं भी विचार के स्पष्ट स्लैपडाउन नहीं मिला है .. तो, क्या कोई रास्ता है, या यह सिर्फ कोई नहीं कर सकता है?

धन्यवाद!

Answer 1

संक्षेप में, यह संभव नहीं है। आप यह कर सकते हैं, लेकिन आपको इसे काम करने के लिए पृष्ठ पर दूसरी HTML ऑब्जेक्ट जोड़ने की आवश्यकता है। तो उदाहरण के लिए, अपने शरीर के नीचे एक div ब्लॉक रखें, और उस ऑब्जेक्ट को दूसरी पृष्ठभूमि असाइन करें।

आशा है कि इससे मदद मिलती है!

Answer 2

एकमात्र तरीका एक और कंटेनर का उपयोग करना है। प्रत्येक तत्व में केवल एक पृष्ठभूमि छवि हो सकती है।

Answer 3

शीर्ष पर दूसरा तत्व प्राप्त करने के लिए पूर्ण स्थिति और जेड-इंडेक्स का उपयोग करें।

Answer 4

मत भूलना आप HTML तत्व को शैलियाँ लागू कर सकते हैं:

html { 
background: url(images/whatever.gif); 
} 

Answer 5

स्तरित पृष्ठभूमि CSS3 Working Draft के हिस्से के रूप तक मुझे पता है रहे हैं, लेकिन, उनके लिए समर्थन वेबकिट तक ही सीमित है/KHTML आधारित सफारी, क्रोम, कॉन्करर और ओमनीवेब जैसे ब्राउज़र।

body { 
    font-size: 62.5%; /* Resets 1em to 10px */ 
    font-family: Verdana, Arial, Sans-Serif; 
    background-color: #9D5922; 
    color: #000; 
    margin-left: auto; 
    margin-right: auto; 
    margin: 0; 
    padding: 0; 
    background: url("images/top.gif") left bottom repeat, 
       url("images/desk.gif") left bottom repeat; 
} 

Answer 6

मैं पहले से ही एक नकली प्रश्न में समाधान पोस्ट किया है, लेकिन किसी को भी है कि इस जानकारी की आवश्यकता हो सकती के लिए मैं इसे यहाँ के रूप में अच्छी पोस्ट करेंगे:

अपने उदाहरण कोड का उपयोग करना, इस प्रकार दिखाई देगा।

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

यह आलेख दर्शाता है कि Vitamin पर प्रभाव कैसे प्राप्त किया जा सकता है। इन 'प्याज त्वचा' परतों को लपेटने के लिए एक समान अवधारणा A List Apart पर पाई जा सकती है।

Answer 7

link text

ऊपर सबसे अच्छा उल्लेख लिंक वर्णन क्या आप तक r ...

Answer 8

आजकल यह सब "आधुनिक" ब्राउज़रों (नहीं < IE9, afaik) में किया जा सकता है। मैं पुष्टि कर सकता हूं कि यह फ़ायरफ़ॉक्स, ओपेरा, क्रोम में काम करता है। ऐसा करने का कोई कारण नहीं है, जब तक आपके पुराने ब्राउज़र/आईई के लिए एक सभ्य फॉलबैक समाधान हो।

वाक्य रचना

और

के बीच

 
    background:url(..) repeat-x left top, 
      url(..) repeat-x left bottom; 

 
    background-image:url(..), url(..); 
    background-position:left top, left bottom; 
    background-repeat:repeat-x; 

आप लाइनब्रेक की जरूरत नहीं है आप चुन सकते हैं के लिए

, लेकिन अल्पविराम महत्वपूर्ण है।

---

ध्यान दें! निम्नलिखित दो पृष्ठभूमि पैदा करेगा, भले ही आप केवल एक छवि यूआरएल निर्दिष्ट:

 
    background-image:url(..); 
    background-position:top, bottom; 

---

और निश्चित रूप से, वहाँ विकल्प नेस्टेड कंटेनर का उपयोग करने के लिए है, लेकिन यह अपने html ब्लोट जाएगा।

Answer 9

सीएसएस में परत पर परत के लिए इन लिंक का पालन

http://www.handycss.com/tips/layers-on-layer-in-css/