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

Lesezeit: 3 Minuten

Benutzer-Avatar
GibboK

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

Ich muss die Elementopazität des Kindes auf einen beliebigen Wert zurücksetzen/einstellen. 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 sieht so aus, als sollte es funktionieren…

    – Ben

    22. November 2012 um 8:57 Uhr

  • Ich muss wahrscheinlich ein separates Element dafür erstellen. Lassen Sie mich Ihre Gedanken wissen. Danke

    – GibboK

    22. November 2012 um 9:00 Uhr

  • Der Maple-Browser verwendet die Gecko-Engine, die die Opazität gut unterstützt, also sollte es funktionieren. Was ist Ihr Markup?

    – Kyle

    22. November 2012 um 9:01 Uhr

Benutzer-Avatar
Kyle

Das Problem, das Sie wahrscheinlich haben (basierend auf Ihren Selektoren), ist, dass die Deckkraft alle untergeordneten Elemente eines übergeordneten Elements 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 RGB-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 einfach denselben RGBA-Code verwenden, aber auf die color-Eigenschaft von CSS setzen:

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

Aber Sie müssen 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/

  • Vielen Dank für Ihre Hilfe, ich muss die Farbe für den TEXT in p einstellen, nicht den Hintergrund … Ihren Code an den Hintergrund anpassen: rgba (255, 255, 255, 1); Ich habe immer noch das gleiche Problem. Vielen Dank für Ihre Zeit.

    – GibboK

    22. November 2012 um 9:08 Uhr

  • Ah, ich mache eine neue Geige für dich. 🙂

    – Kyle

    22. November 2012 um 9:10 Uhr

  • Die Antwort wurde aktualisiert, um sie für Farbe zu verwenden, und dass Sie die Deckkraft von übergeordneten Elementen entfernen müssen.

    – Kyle

    22. November 2012 um 9:12 Uhr

  • Es funktioniert großartig auf Desktop-Browsern, aber nicht auf Mepla, ich teste auf einem Samsung SmartTv 2012

    – GibboK

    22. November 2012 um 9:13 Uhr

  • Das ist das Beste im Universum – Arbeiten in FF 33 für Linux Mint.

    – Benutzer1063287

    27. November 2014 um 23:44 Uhr

Benutzer-Avatar
Sebastian Lorber

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 LESS zum Beispiel könnten Sie 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);
}

Eigentlich ist das was a eingebaute LESS-Funktion stelle ausserdem zur Verfügung:

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

Siehe Wie konvertiere ich HEX-Farbe mit dem Less-Compiler in RGBA?

Die obige Antwort funktioniert gut, aber für Leute, die gerne Hex-Farbcodes verwenden, 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 die gleiche Farbe, aber ohne Deckkraft ist. Hinweis: Funktioniert gut in Chrome und Firefox, während Edge und IE dies nicht tun. Hatte noch keine Gelegenheit, es in anderen Browsern zu testen.

1130280cookie-checkZurücksetzen der Deckkraft eines untergeordneten Elements – Maple Browser (Samsung TV App)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy