rgba

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5); maxbeatty Use the rgba function built into Sass Sets the opacity of a color. Examples: rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2) Parameters: (Color) color (Number)

I need help with a little bit of color math.(RGBA) I'm trying to reduce the amount of green on a character, without actually affecting the green background. Green screen for visual effects. So here is what I have: I have a guy on green screen. Using the expression: g>(r+b)/2 ? (r+b)/2:g Expression says if the green color value is greater than the sum of red and blue divided by 2, then it green will be set to that sum. Running that expression will give me the second image. You can see that the green is removed perfectly from the guy, which I want, but it also takes the green from the background

I'm applying a basic linear-gradient like this: background-image: linear-gradient(to top, red, rgba(0,0,0,0)); this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color: here's chrome (how it is supposed to be): and here's safari I've tried prefixing it with -webkit- , changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this? here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/ This has to do with the way browsers render transparent . For most browsers, transparent ===

What would be the easiest way to transform $('#my_element').css('backgroundColor') to object like this: { r: red_value, g: green_value, b: blue_value, a: alpha_value } ? var c = $('body').css('background-color'); var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(','); for(var i in rgb) { console.log(rgb[i]); } Try it here http://jsbin.com/uhawa4 Edit : var c = $('body').css('background-color'); var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(','); for(var i in rgb) { console.log(rgb[i]); } or even simpler way, just aiming at numbers var c = 'rgba(60,4,2,6)';

I want to get rgba backgrounds working with all browsers. I did some searching and found out that generally there are three types of browsers out there: 1) Browsers that support rgba. 2) Internet Explorer that supports rgba via bizarre '-ms-filter' thing. 3) Browsers that do not support rgba, but I could use base64 png images with 'data URI scheme'. (Even when browser does not support URI scheme, according to this it still could be done.) I have no problems with rgba supporting browsers, and I can get it working with IE, but problem is that I have no idea how to generate client side base64 png

I have two colours defined as RGBA (in my specific examples, one of the set is [white with alpha 0.85] and [57, 40, 28 with alpha 0.25]. The second colour is drawn over the first one (i.e. white with alpha is the background and the second colour is used for drawing). How can I figure out what the RGBA colour of the combination is going to be? I need to do this one-off - so any tools is fine (e.g. I'm happy to draw something in photoshop and see what comes out). I have several sets to combine, but not too many. Any pointers? Thanks. When using Painter's algorithm most color compositing is done