Seperates background-color alpha?

wolf

Hi,
kennt jemand eine Möglichkeit den Alpha wert der Hintergrundfarbe separat zu steuern?
Beispiel:

CSS

.button.green{
    background-color: rgba(0,255,0, .5);
}
.button.red{
    background-color: rgba(255,0,0, .5);
}
.button:hover{
    background-color-alpha: 1;
}

Grüße, Wolf

Nitamud

Schau hier mal, vlt ist das , dass von dir gesuchte:

change Alpha Channel only

scheint ohne einen CSS-Preprocessor relativ umständlich zu sein(und dort im Grunde auch nicht möglich). Wozu brauchst du das denn?

Aber im Grunde ist so was wohl nicht vorgesehen, zumindest finde ich in der Coloring Spezifaktion keinen Hinweis darauf....

Talwin

Hi,

nein den Alpha Wert kannst Du nur bei einem RGBA oder HSLA Wert mit angeben, geht nicht separat.

wolf

In der Spezifikation habe ich auchnichts gefunden.. deswegen ja mal hier gefragt ob schonmal jemand was gebastelt hat.. ja preprozessor wär ne möglichkeit.. geht mit sass mixin's auch ganz gut.. aber reines css wär schon cooler

Ich brauche es um viel Code zu sparen

Thx.

Basi

Das wäre eine Möglichkeit die mir spontan einfiele.

JavaScript

// read items
    var elementButtons = document.getElementsByClassName("button");




    // alpha values
    valueMouseOver = 1;
    valueMouseOut  = .5;




    // loop items, add events
    for(i = 0; i < elementButtons.length; i++){
        elementButtons[i].addEventListener("mouseover", function(){

            var value = calculateValue(getComputedStyle(this).getPropertyValue("background-color").split(','));




            this.style.backgroundColor = "rgba("+ value[0] +", "+ value[1] +", "+ value[2] +", "+ valueMouseOver +")";




        });

        elementButtons[i].addEventListener("mouseout", function(){




            var value = calculateValue(getComputedStyle(this).getPropertyValue("background-color").split(','));




            this.style.backgroundColor = "rgba("+ value[0] +", "+ value[1] +", "+ value[2] +", "+ valueMouseOut +")";




        });
    }




    // parse splitted rgba value to valid float
    function calculateValue(input){




        return {
            0 : parseFloat(input[0].replace(/[^0-9.]/g, "")),
            1 : parseFloat(input[1]),
            2 : parseFloat(input[2])
        };




    }

Alles anzeigen

wolf

JA vielen Dank Basii.. ich würde halt (leider) gerne ohne JS arbeiten.. xx

Basi

Okay, warum?

Opacity und sibling Selektor probiert? jsFiddle solution

Nitamud

Hab da heute noch was interessantes gefunden, vlt meinst du es so:

http://codepen.io/Nitamud/pen/vEmNNX

Basi

Durch opacity wird das gesamte Element transparent, das gilt für den Hintergrund, den Text, und andere Kindelemente. Es soll offenbar jedoch nur den Hintergrund betreffen.

wolf

Hi, ja basii, das mit dem silbing Selektor überschreitet dann doch den Aufwand im Vergleich zu anderen Lösungen (in diesem Falle zumindest) - aber vielen Dank für den Tipp!

Jetzt mitmachen!