|
|
| Page 1 of 1 |
|
|
 Posted: Wed, 25th Jun 2014 11:47 Post subject: RGB value > RGBA, specify alpha |
|
 |
Hello (again)
I have the following code:
| Code: | bgColor = $(".slide2").css("background-color");
$(".container").css('background', '-webkit-linear-gradient(top, '+ bgColor +' 0%, '+ bgColor +' 100%)'); |
At the moment I'm getting a RGB value, and while that will work well for one side of the gradient, I need the other side to be RGBA so that it fades off.
I did find a way to convert RGB > RGBA, but I couldn't find a way to specify the alpha afterwards.
Is there an easy way to do this? I've been through a tonne of RGB/RGBA/HEX/HSL etc converters and I've had no luck.
TL;DR: Topic title
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 13:21 Post subject: |
|
|
rgba(R,G,B,a) where a is alpha (0<a<1) isn't working? It should as far as I know :\
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 13:27 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 02:01; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 13:39 Post subject: |
|
|
I'm not sure I understand your problem completely :S
You could just set bgColor to be rgba value, if you need just rgb, then a=1, or do you want to be able to change the alpha property at will at any time?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 13:43 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 02:01; edited 1 time in total
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 13:50 Post subject: |
|
|
The rgb value you got from converting is an array? Can't you just assign a new variable a (or a1-a5) and then use .push to put it with the existing array and then just assign that new array to
bgColor = $(".slide2").css("background-color", "rgba", rgbaArray);
or sth of that kind?
I'm not that good with JS, still learning, but that's just the general idea I'd try to go with.
I'm sure Pumpy or Werelds will offer a better solution 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
| Posted: Wed, 25th Jun 2014 13:55 Post subject: |
|
|
In many more steps than you need and with examples of how to deal with it:
| Code: |
// rgb(255, 255, 255)
var colour = $target.css("background-color");
// 255,255,255
var rgb_as_string = colour.replace(/[^\d,]/g, ''); // Regular expression that replaces everything except digits (\d) and commas with an empty string (effectively removing them).
// ['255', '255', '255']
var rgb_components_as_strings = rgb_as_string.split(',');
// Could go on here, map all components to parseInt() and manipulate the values with math but...you get the idea I hope :P
// Use the shit above - if all you want is to add the alpha channel:
$target.css('background-color', 'rgba(' + rgb_as_string + ',0.5)');
// Or you could use the components and take out all the blue for example
$target.css('background-color', 'rgba(' + rgb_components_as_strings[0] + ',' + rgb_components_as_strings[1] + '0,0.5)');
// Alternatively, a .push() example like dingo suggests
rgb_components_as_strings.push('0.5');
$target.css('background-color', 'rgba(' + rgb_components_as_strings.join(',') + ')');
|
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 25th Jun 2014 15:55 Post subject: |
|
|
Last edited by Interinactive on Tue, 5th Oct 2021 02:01; edited 1 time in total
|
|
| Back to top |
|
|
Werelds
Special Little Man
Posts: 15098
Location: 0100111001001100
|
| Posted: Wed, 25th Jun 2014 16:07 Post subject: |
|
|
| Code: |
var start = end = bgColor.replace(/[^\d,]/g, '').split(',');
start.push('1');
end.push('1');
$(".copy").css("background", "linear-gradient(to bottom, rgba(" + start.join(",") + ") 0%, rgba(" + end.join(",") + ") 100%)"); |
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|
