Transparenz für Hintergrund von "pinned tabs"

  • Hallo, habe die Farben meiner tabs etwas angepasst. Funktioniert im Prinzip alles bestens. Ich möchte folgendes bewirken, was mir nicht gelingt:

    Die Hintergrundfarbe der "pinned tabs" sollen Transparenz erhalten, ohne dabei die Schrift/Symbole mit zu beinflussen (die sollen keine Transparenz erhalten). Für die "normalen" Tabs gelingt mir das:

    CSS
    .tab-background:not([selected="true"]){
        background: sandybrown!important;
        opacity: 0.5 !important;
        border:1px solid black!important;}

    Somit erhalte ich Transparenz für den Hintergrund der nicht ausgewählten Tabs ohne die Schrift "aufzuhellen".

    Wie funktioniert das mit den "pinned tabs"?

    Bisher benutze ich folgenden Code:

    CSS
    .tabbrowser-tab[pinned]{
    background:palegreen!important;
    }

    Sobald ich da etwas mit ".tab-background:[pinned]" probiere, wird der Hintergrund der "nicht ausgewählten Tabs" verwendet.

    Bei Einfügen von "opacity" bekommt der Hintergrund zwar Transparenz, jedoch die Symbole werden ebenfalls "ausgeblasst".

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)

  • Hallo,

    eine allgemeine Erklärung:

    opacity ist nur dann sinnvoll, wenn du die Deckkraft des ganzen Elemens reduzieren möchtest, das schließt die Schrift und sämtliche Unterelemente ein. Wenn du nur den Hintergrund halbtransparent haben möchtest, darfst du auch nur den Hintergrund bearbeiten. Mit Wörtern wie palegreen als Farbwert kommst du aber nicht weit. Dafür musst du die Farbe als Hex- oder RGB-Wert ausschreiben. Das ist in diesem Fall rgb(152, 251, 152). Nun musst du nur noch die rgb()-Funktion gegen rgba() austauschen und kannst damit dann als vierten Parameter den Alpha-Wert setzen, genauso wie du vorher opacity gesetzt hättest: rgba(152, 251, 152, .5). Auf ein Beispiel in der Hex-Darstellung verzichte ich, da das Zahlensystem für die meisten zu kompliziert ist, RGB(A) ist einfacher.

  • Danke, funktioniert! Anscheinend kann man aber die "normalen" tabs auch über die Kombi ".tab-background/opacity" nach meinen Vorstellungen beeinflussen, was offenbar mit den "pinned tabs" nicht geht.

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)