सीएसएस बॉक्स छाया + पारदर्शी पृष्ठभूमि छवियां = सहज ज्ञान युक्त ब्रेकडाउन

Question

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

समस्या है में गिरावट छाया डाल के बजाय एक सीएसएस ड्रॉप छाया का उपयोग करना चाहते हैं, ड्रॉप छाया तत्व के चारों ओर तैयार प्रतीत होता है। हालांकि मुझे पृष्ठभूमि छवि के पारदर्शी हिस्सों के माध्यम से ड्रॉप छाया रंग देखने की उम्मीद है, मैं इसके बजाय पृष्ठभूमि रंग देख रहा हूं (see this jsfiddle)।

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

कोई विचार?

Answer 1

बॉक्स-छाया पारदर्शी पृष्ठभूमि के माध्यम से नहीं दिखते हैं। एक और सरल परीक्षण केस होगा:

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: transparent; 
    box-shadow: 0 0 10px #000; 
}​ 

आउटपुट अपेक्षित ब्लैक स्क्वायर सही होगा? खैर ... नहीं, यह एक बूंद छाया के साथ एक सफेद वर्ग है। http://jsfiddle.net/UjhrW/

को प्राप्त करने के लिए आप क्या आप, dropshadow के लिए अलग मार्कअप की आवश्यकता होगी सफेद के साथ इसे भरने, और फिर छाया की फैल सेट इसलिए यह एक धुँधली वर्ग की तरह दिखता है क्या करना चाहते हैं ...

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: #000; 
    box-shadow: 0 0 10px 6px #000; 
}​ 

http://jsfiddle.net/Etmty/