कई तत्वों पर सीएसएस ढाल

Question

मैं सोच रहा था कि एकाधिक तत्वों के लिए एक एकल CSS3 ढाल पृष्ठभूमि लागू करना संभव है या नहीं। दूसरे शब्दों में, ढाल मूल तत्व पर फैलता है लेकिन केवल बाल तत्वों के अंदर दिखाई देता है। Applying gradient over multiple views

यह हालांकि मैं CSS/HTML कोड के रूप में यह जरूरत है, मेरी समस्या ठीक है:

खोज के बाद, मैं इस सूत्र मिल गया।

यह बुनियादी सेटिंग है:

समस्या कल्पना करने के लिए, मैं दो तस्वीरें बना दिया। दो <div> एस को ढाल पृष्ठभूमि की आवश्यकता है <div> तत्व के अंदर हैं।

आप देख सकते हैं, दूसरी छवि में ढाल perfecly तत्व एक से तत्व बी को fades इस आशय सबसे छवि संपादन प्रोग्राम में आसानी से संभव है, इसलिए मैं सिर्फ एक उपयुक्त छवि का उपयोग कर सकता है वांछित प्रभाव प्राप्त करने के लिए।

हालांकि, चूंकि छवियां शायद इसे हल करने का सबसे अच्छा तरीका नहीं है, इसलिए मुझे उम्मीद है कि यह केवल CSS के साथ ऐसा करने के तरीके पर एक उत्तर मिल जाएगा। मैंने पहले ग्रेडियेंट का इस्तेमाल किया था, लेकिन मुझे अभी तक इस समस्या का समाधान नहीं मिला है।

किसी भी मदद की सराहना की है।

संपादित करें (06/01/15 13:30 GMT + 1): तत्वों ए और बी कोनों दौर के लिए सक्षम होना चाहिए। स्पैनिंग ढाल मूल रूप से radial-gradient माना जाता था, लेकिन इसकी आवश्यकता नहीं है। शायद समस्या वास्तव में हल करने योग्य नहीं है।

Answer 1

डेमो:https://jsfiddle.net/andrewgu/gptbyejt/

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

लाभ: लचीला, संगत

विपक्ष: ठोस पृष्ठभूमि रंग केवल

---

अन्य तरीके से कुछ CSS clipping कहा जाता है का उपयोग करें। आप clip-path और -webkit-clip-path की सीएसएस घोषणाओं का उपयोग करके ऐसा कर सकते हैं। यह मूल रूप से एक तत्व पारदर्शी का हिस्सा बनाता है। हालांकि, आपको पहले से प्रत्येक तत्व का आकार निर्दिष्ट करने की आवश्यकता है, और वस्तुओं को सही तरीके से प्रदर्शित करने के लिए इसे थोड़ा सा ट्विक करें। यह विधि गैर-ठोस पृष्ठभूमि के साथ काम करती है। लोकप्रिय धारणा के विपरीत, सीएसएस क्लिपिंग क्रॉस-ब्राउज़र संगतता के साथ बहुत अच्छी है।

लाभ: नमूनों पृष्ठभूमि, संगत

विपक्ष: परिभाषित किया जाता है बच्चों के तत्व आकार, में सुधार करने background-attachment: fixed और iframe की

Answer 2

संयोजन आप के लिए यह काम कर सकता है।
nexts.github.io/Multiple.js की जाँच करें और पर ध्यान देना "यह कैसे काम करता है" खंड

Answer 3

(यहां तक ​​कि अगर यह qestion काफी बहुत पुरानी है ...)

Multiple.js पर एक नजर डालें - जो बताती है कि एक आवेदन करने के लिए js के बिना कई तत्वों के लिए ढाल ।

डेमो पृष्ठ से उद्धरित:

.selector { 
    background-image: linear-gradient(white, black); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; /* <- here it is */ 
    width: 100px; 
    height: 100px; 
} 

background-attachment: fixed व्यूपोर्ट के आकार और हर तत्व उचित हिस्सा में प्रदर्शित करता है के लिए पृष्ठभूमि का विस्तार, वास्तव में क्या जरूरत है!

इसके पीछे का विचार स्मार्ट के रूप में सरल है और अधिकांश आधुनिक ब्राउज़रों (आईई 8 भी) के लिए काम करता है।

यह तो लागू इस तरह दिखता है: