नेस्टेड तत्वों के लिए अलग अस्पष्टता सेट करें

Question

मैं एक win7 फ़ाइल एक्सपोर्लर-जैसे प्रभाव बनाना चाहता हूं: शीर्षक पट्टी में 1 से कम अस्पष्टता है, जबकि सामग्री में कोई अस्पष्टता नहीं है।

तो मैं इसे बनाने के लिए एक साथ दो तत्वों गठबंधन करने की कोशिश की:

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div> 
</div> 

मैं div#outer 0.8 की एक अस्पष्टता है बनाना चाहते है, तो कर div#inner कोई अस्पष्टता है (अस्पष्टता के साथ = 1)।

हालांकि ऐसा लगता है कि यह काम नहीं करता है। चूंकि div#outer की अस्पष्टता div#inner की प्रभावित होगी।

कोई विचार?

Answer 1

हालांकि ऐसा लगता है कि यह काम नहीं करता है। चूंकि div # बाहरी की अस्पष्टता div # आंतरिक के प्रभाव को प्रभावित करेगी।

सही।

---

लेकिन क्या आप चाहते हैं बस एक पारदर्शी पृष्ठभूमि, की स्थापना RGBA colorbackground-color के रूप में आवश्यकताओं को पूरा करेगा है यदि। इस तरह:

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;height:100%;"></div> 
</div> 

---

अधिक जानकारी के लिए, MDN दस्तावेजों यहां पढ़ें: https://developer.mozilla.org/en-US/docs/CSS/color

---

IE 7 समर्थन के लिए, मेरा मानना ​​है कि this (उत्पन्न पृष्ठभूमि छवि फ़ाइलों का उपयोग कर) एक स्वीकार्य समाधान है।

Answer 2

आंतरिक div इसके कंटेनर की अस्पष्टता का उत्तराधिकारी होगा।

घोंसला वाले तत्वों से बचने और इसके बजाय पूर्ण स्थिति का उपयोग करने के लिए एक क्रॉस-ब्राउज़र वर्कअराउंड है। आप एक उदाहरण देख सकते हैं, जहां अस्पष्टता पृष्ठभूमि करने के लिए लागू किया जाता है, लेकिन पाठ 1 के एक अस्पष्टता है: http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010

कोड का नमूना (दो स्पान तत्व मुख्य अवधि के भीतर कंधे से कंधा मिलाकर रखा जाता है, दूसरा एक पृष्ठभूमि है जो अस्पष्टता प्राप्त करता है):

<span style="position:relative;display:inline-block;width:100%;height:100%;"> 
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
</span>