Schau hier mal, vlt ist das , dass von dir gesuchte:
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....
Hi,
nein den Alpha Wert kannst Du nur bei einem RGBA oder HSLA Wert mit angeben, geht nicht separat.
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.
Das wäre eine Möglichkeit die mir spontan einfiele.
// 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])
};
}Hab da heute noch was interessantes gefunden, vlt meinst du es so:
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.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!