it-swarm.com.de

Die Deckkraft eines untergeordneten Elements zurücksetzen - Maple Browser (Samsung TV App)

Ich habe ein Problem mit dem Erstellen eines transparenten Elements, das ein untergeordnetes Element enthält .. Mit diesem Code erhält das untergeordnete Element den Opazitätswert vom übergeordneten Element.

Ich muss die Elementdeckkraft des Kindes auf einen beliebigen Wert zurücksetzen Referenzbrowser 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; 
    }

BEARBEITEN MARKUP

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

Das Problem, das Sie wahrscheinlich haben (basierend auf Ihren Selektoren) ist, dass die Deckkraft alle untergeordneten Elemente eines übergeordneten Elements beeinflusst:

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

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

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

Es gibt aber eine Lösung! Verwenden Sie rgba-Hintergrundwerte und Sie können Transparenz haben, wo immer Sie möchten :)

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 einfach den gleichen rgba-Code verwenden, aber die color-Eigenschaft von CSS festlegen:

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

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

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

142
Kyle

Kyles Lösung funktioniert gut.

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

Mit LESS zum Beispiel können Sie ein Mixin wie:

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

Und benutze es gerne

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

Eigentlich ist das, was eine eingebaute LESS-Funktion auch bietet:

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

Siehe Wie konvertiert man HEX-Farbe mit weniger Compiler in rgba?

5

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

0
Max