एक बच्चे तत्व की अस्पष्टता को रीसेट करना - मेपल ब्राउज़र (सैमसंग टीवी ऐप)

Question

मुझे एक पारदर्शी तत्व बनाने के साथ कोई समस्या है जिसमें बाल तत्व है। इस कोड का उपयोग करके बच्चे तत्व को मूल तत्व से अस्पष्टता मान प्राप्त होता है।

मुझे बच्चे की तत्व अस्पष्टता को मनमाने ढंग से मानने/सेट करने की आवश्यकता है। संदर्भ का ब्राउज़र Maple Browser (for a Samsung TV Application) है।

.video-caption { 
     position: absolute; 
     top:50px; 
     width: 180px; 
     height: 55px; 
     background-color: #000; 
     -khtml-opacity:.40; 
     -moz-opacity:.40; 
     -ms-filter:"alpha(opacity=40)"; 
     filter:alpha(opacity=40); 
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/ 
     opacity:.40; 
    } 
    .video-caption > p { 
     color: #fff !important; 
     font-size: 18px; 
     -khtml-opacity:1; 
     -moz-opacity:1; 
     -ms-filter:"alpha(opacity=100)"; 
     filter:alpha(opacity=100); 
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1); 
     opacity:1; 
    } 

संपादित मार्कअप

<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div> 

Answer 1

समस्या आप शायद है (अपने चयनकर्ताओं को देख के आधार पर) है कि अस्पष्टता एक माता पिता के सभी बच्चे तत्वों को प्रभावित करता है:

div 
{ 
    background: #000; 
    opacity: .4; 
    padding: 20px; 
} 

p 
{ 
    background: #f00; 
    opacity: 1; 
}​ 

http://jsfiddle.net/Kyle_/TK8Lq/

लेकिन एक समाधान है! RGBA पृष्ठभूमि मानों का उपयोग करें और आप पारदर्शिता भी आप चाहते हैं :)

div 
{ 
    background: rgba(0, 0, 0, 0.4); 
    /*opacity: .4;*/ 
    padding: 20px; 
} 

p 
{ 
    background: rgba(255, 0, 0, 1); 
    /*opacity: 1;*/ 
}​ 

http://jsfiddle.net/Kyle_/TK8Lq/1/

---

पाठ के लिए, आप सिर्फ एक ही RGBA कोड का उपयोग कर सकते हैं, लेकिन सीएसएस के रंग संपत्ति के लिए निर्धारित किया जा सकता है:

color: rgba(255, 255, 255, 1); 

लेकिन आपको काम करने के लिए सबकुछ पर आरजीबीए का उपयोग करना होगा, आपको सभी मूल तत्वों के लिए अस्पष्टता को हटाना होगा।

http://jsfiddle.net/Kyle_/TK8Lq/2/

Answer 2

केली के समाधान ठीक काम करता है।

इसके अतिरिक्त, यदि आप आरजीबीए का उपयोग करके अपने रंग सेट करना पसंद नहीं करते हैं, बल्कि हेक्स का उपयोग करते हैं, तो समाधान हैं।

उदाहरण के लिए कम के साथ

, आप की तरह एक mixin इस्तेमाल कर सकते हैं:

.transparentBackgroundColorMixin(@alpha,@color) { 
    background-color: rgba(red(@color), green(@color), blue(@color), @alpha); 
} 

और

.myClass { 
    .transparentBackgroundColorMixin(0.6,#FFFFFF); 
} 

की तरह उपयोग वास्तव में यह है कि क्या एक built-in LESS function भी प्रदान करना है:

.myClass { 
    background-color: fade(#FFFFFF, 50%); 
} 

देखें How to convert HEX color to rgba with Less compiler?

Answer 3

ऊपर दिए गए कार्यों का जवाब अच्छी तरह से है, हालांकि हेक्स रंग कोड का उपयोग करने वाले लोगों के लिए, आप हेक्स रंग से पारदर्शिता सेट कर सकते हैं। EXP: # 472d20b9 - पिछले दो मान रंग के लिए अस्पष्टता सेट करते हैं जबकि # 472 डी 20 एक ही रंग होगा लेकिन अस्पष्टता के बिना। नोट: क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है, जबकि एज और आईई नहीं करता है। अन्य ब्राउज़रों में इसका परीक्षण करने का मौका नहीं मिला है।