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

73

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>
javascript css samsung-smart-tv smart-tv GibboK
quelle
Das sieht so aus, als ob es funktionieren sollte ...
Ben
Ich muss wahrscheinlich ein separates Element dafür erstellen. Lassen Sie mich Ihre Gedanken wissen .. danke
GibboK
Der Maple-Browser verwendet die Gecko-Engine, die die Deckkraft einwandfrei unterstützt, sodass sie funktionieren sollte. Was ist dein Aufschlag?
Kyle

Antworten:

162

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/

Kyle
quelle
Vielen Dank für Ihre Hilfe. Ich muss die Farbe für den TEXT in p und nicht im Hintergrund festlegen. Passen Sie Ihren Code an den Hintergrund an: rgba (255, 255, 255, 1); Ich habe immer noch das gleiche Problem. Vielen Dank für Ihre Zeit.
GibboK
Ah, ich mache eine neue Geige für dich. :)
Kyle
1
Die Antwort wurde aktualisiert, um sie für Farbe zu verwenden, und Sie müssen die Deckkraft von übergeordneten Elementen entfernen.
Kyle
es funktioniert gut auf Desktop-Browser, aber nicht auf Mepla, ich teste auf einem Samsung SmartTv 2012
GibboK
2
Dies ist das Beste im Universum - in ff 33 für Linux Mint zu arbeiten.
user1063287
6

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?

Sebastien Lorber
quelle
1

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.

Max
quelle