Zurücksetzen der Deckkraft eines untergeordneten Elements - Maple Browser (Samsung TV App)

Ich habe ein Problem beim Erstellen eines transparenten Elements mit einem untergeordneten Element. Mit diesem Code erhält das untergeordnete Element den Opazitätswert vom übergeordneten Element.

Ich muss die Deckkraft des untergeordneten Elements auf einen beliebigen Wert zurücksetzen / setzen. Browser der Referenz ist 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; 
    }

MARKUP BEARBEITEN

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

Das Problem, das Sie wahrscheinlich haben (basierend auf dem Blick auf Ihre Selektoren), ist, dass die Deckkraft alle untergeordneten Elemente eines Elternteils betrifft:

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

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

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

Aber es gibt eine Lösung! Verwenden Sie rgba Hintergrundwerte und Sie können Transparenz haben, wo immer Sie wollen :)

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/

Für Text können Sie nur denselben rgba-Code verwenden, jedoch die Farbeigenschaft von CSS festlegen:

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

Sie müssen jedoch rgba für alles verwenden, damit dies funktioniert. Sie müssen die Deckkraft für alle übergeordneten Elemente entfernen.

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

Kyles Lösung funktioniert gut.

Wenn Sie Ihre Farben nicht mit RGBA, sondern mit HEX einstellen möchten, gibt es außerdem Lösungen.

Mit WENIGER können Sie beispielsweise ein Mixin verwenden wie:

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

Und benutze es gerne

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

Genau das bietet eine integrierte LESS-Funktion :

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

Siehe So konvertieren Sie HEX-Farben mit weniger Compiler in rgba?

Die obige Antwort funktioniert gut, aber für Leute, die Hex-Farbcodes verwenden möchten, können Sie die Transparenz durch Hex-Farbe selbst einstellen. EXP: # 472d20b9 - Die letzten beiden Werte legen die Deckkraft für die Farbe fest, während # 472d20 dieselbe Farbe hat, jedoch ohne Deckkraft. Hinweis: Funktioniert in Chrome und Firefox einwandfrei, Edge und IE jedoch nicht. Ich hatte keine Gelegenheit, es in anderen Browsern zu testen.