सीएसएस

Question

के साथ एक पारदर्शी div में अपारदर्शी पाठ ओवरराइड मुझे कोई अस्पष्टता है एक पारदर्शी div के अंदर का पाठ बनाने के लिए कोशिश कर रहा हूँ, उर्फ ​​पूरी तरह से काला हो:

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div> 

केवल सीएसएस के साथ क्या करना संभव है?

अग्रिम धन्यवाद

Answer 1

बच्चे तत्व अस्पष्टता प्राप्त करते हैं। आप क्या कर सकते हैं अपारदर्शी div के बाहर <p> को स्थितिबद्ध करना और इसे ऊपर ले जाने के लिए नकारात्मक मार्जिन सेट करना है।

मैं अक्सर इस समस्या में आया और आमतौर पर इसे इस तरह हल किया। समस्या तब होती है जब आपके पास गतिशील सामग्री होती है और div को विस्तार करना होता है।

Answer 2

सबसे आसान तरीका है अस्पष्टता/अल्फा के साथ माता पिता div की पृष्ठभूमि शैली के लिए है:

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
} 

यह नहीं है, तथापि, IE के साथ संगत है।

आईई> = 7 संगतता के लिए, आप इस्तेमाल कर सकते हैं:

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
} 

मुझे याद है कि IE < 7 एक मालिकाना फिल्टर का विकल्प है, लेकिन मुझे डर है मैं याद नहीं आ रहा है कि यह कैसे काम करता है हूँ। तो मैंने इसका वर्णन करने/दिखाने का कोई प्रयास छोड़ दिया है। अगर मैं एक उपयोगी संदर्भ पा सकता हूं हालांकि मैं इसे बाद में जोड़ दूंगा।

easwee अस्पष्टता से बताया गया है निहित तत्वों द्वारा विरासत में मिली है, जिसके कारण आप इसे ओवरराइड नहीं कर सकते, और यही कारण है कि मैं background-color/background-image दृष्टिकोण का उपयोग करना पसंद।

Answer 3

क्या पृष्ठभूमि में ठोस रंग होता है? यदि ऐसा है, तो आप div के लिए पारदर्शी पृष्ठभूमि रंग का चयन करने के लिए आरजीबीए का उपयोग भी कर सकते हैं जो कि बच्चों द्वारा विरासत में नहीं है। अधिक जानकारी के लिए RGBa Browser Support पढ़ें, आईई और another solution के लिए एक समाधान।

यदि div की पृष्ठभूमि ठोस नहीं है, तो आप पृष्ठभूमि के रूप में एक पारदर्शी पीएनजी का उपयोग कर सकते हैं। IE6 (और 5.5) में AlphaImageLoader का उपयोग करना याद रखें।