Seperates background-color alpha?
-
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.
Alles anzeigenJavaScript- // 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.