Resetowanie krycia elementu potomnego - Maple Browser (aplikacja Samsung TV)

Question

Mam problem z tworzeniem przezroczystego elementu, który ma element potomny. Za pomocą tego kodu element podrzędny otrzymuje wartość krycia z elementu nadrzędnego.

Muszę zresetować/ustawić nieprzezroczystość elementu dziecka do dowolnej wartości. Przeglądarka to 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; 
    } 

EDIT znaczników

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

Answer 1

Problem prawdopodobnie masz (na podstawie patrząc na swoje selektorów) jest to, że krycie wpływa na wszystkie elementy podrzędne parent:

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

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

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

Ale jest rozwiązanie! Użyj wartości RGBA w tle i można mieć przejrzystość gdzie chcesz :)

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/

---

Dla tekstu, można po prostu użyć tego samego kodu RGBA, ale ustawienie właściwości kolorów CSS:

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

Ale musisz użyć rgba na wszystko, aby to zadziałało, musisz usunąć krycie dla wszystkich elementów rodzica.

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

Answer 2

rozwiązanie Kyle'a działa dobrze.

Ponadto, jeśli nie chcesz ustawiać kolorów za pomocą RGBA, ale raczej za pomocą HEX, istnieją rozwiązania.

Z mniej za exemple, można użyć wstawek jak:

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

i używać go jak

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

Właściwie to jest to, co built-in LESS function również:

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

Zobacz How to convert HEX color to rgba with Less compiler?

Answer 3

Odpowiedź powyżej działa dobrze, jednak dla osób, które lubią używać kodów kolorów w formacie szesnastkowym, można ustawić przezroczystość według samego koloru hex. EXP: # 472d20b9 - ostatnie dwie wartości ustawiają krycie koloru, a # 472d20 będzie tego samego koloru, ale bez krycia. Uwaga: działa dobrze w przeglądarce Chrome i Firefox, a Edge i IE nie. Nie miałem okazji przetestować go w innych przeglądarkach.