सीएसएस - कम अस्पष्टता div पर अपारदर्शी पाठ?

Question

div के पीछे पृष्ठभूमि छवि का हिस्सा दिखाने के लिए मेरे पास 60% अस्पष्टता वाला div है। क्योंकि अस्पष्टता 60% है, उस div में पाठ ग्रे के रूप में दिखाई देता है।

क्या इस स्तर को ओवरराइड करने और टेक्स्ट को काला दिखाई देने के लिए वैसे भी है?

किसी भी सलाह की सराहना की।

धन्यवाद।

Answer 1

तत्व की बजाय पृष्ठभूमि पर अस्पष्टता सेट करें।

background-color: rgba(255,0,0,0.6); 

कुछ समय पहले मैं कैसे achieve this in a backwards compatible way बारे में लिखा था।

Answer 2

अस्पष्टता पूरे div और उसके सभी बच्चों पर लागू होती है। दुर्भाग्यवश, आप उस अस्पष्टता को पूर्ववत नहीं कर सकते हैं, लेकिन केवल और जोड़ें। और इसके अलावा, किसी तत्व के अंदर पाठ का चयन करने के लिए सीएसएस का कोई तरीका नहीं है।

अपने मामले में, सबसे अच्छा समाधान आपके div ब्लॉक में एक पारदर्शी पृष्ठभूमि छवि (पीएनजी के साथ) को लागू करना है, जैसे सफेद एक पिक्सेल छवि 60% अस्पष्टता के साथ।

एक और समाधान this tutorial by Steven York में वर्णित विभिन्न बक्से और स्थिति का उपयोग करना होगा।

Answer 3

इस आपके सभी सवालों का जवाब देने चाहिए: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 4

सरल समाधान के सही रंग के साथ एक अर्द्ध पारदर्शी PNG बनाने के लिए हो सकता है और प्रयोग करेंगे कि एक पृष्ठभूमि छवि के रूप में।

एक और समाधान जो आपके लेआउट के आधार पर संभव हो सकता है, पाठ को एक अलग परत में रखना और अर्द्ध पारदर्शी भाग के शीर्ष पर स्थित होना है। कुछ इस तरह काम करेगा:

<div style="position: relative; background-image: url('your_image.jpg')"> 
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div> 
    <div style="position: absolute">The text to go on top</div> 
</div> 

आप उचित रूप में अपने पदों/आकार (top, left, width और height गुण) जोड़ने की जरूरत होगी।

Answer 5

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

चीजें करना इस तरह से आपको तत्व तत्व पर पारदर्शिता सेट करने की आवश्यकता नहीं है, इसलिए इसके पाठ की अस्पष्टता अप्रभावित होगी।

आश्चर्यजनक रूप से, अर्ध-पारदर्शी एकल-पिक्सेल बनाने के लिए केवल उपकरण है .PNG here।