Finally, I’ve found it! After thorough testing and experimentation my conclusions are: The correct way is to calculate maximum possible difference between the two colors. Formulas with any kind of estimated average/typical difference had room for discontinuities. I was unable to find a working formula that calculates the distance without blending RGBA colors with some … Read more
Since alpha value both attenuates the background color and the color value, something like this could do the trick: function rgba2rgb(RGB_background, RGBA_color) { var alpha = RGBA_color.a; return new Color( (1 – alpha) * RGB_background.r + alpha * RGBA_color.r, (1 – alpha) * RGB_background.g + alpha * RGBA_color.g, (1 – alpha) * RGB_background.b + alpha … Read more
It depends on the background to which your transparent color will be applied. But if you know the color of the background (e.g. white), you can calculate the RGB color resulting of the RGBA color applied to the specific background. It’s just the weighted average between the color and the background, the weight being the … Read more
There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode. Currently, you won’t be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly. These properties are set up … Read more
The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block – meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear … Read more
It’s a long time ago but you can do something like this: .element { background-color: red; } .element:hover { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); } You can change the 100px into a number you want. I took a large one to cover the whole element. It isn’t a very beautiful … Read more
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) alpha — A number between 0 and 1 Returns: (Color) Code: rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX) background: rgba(255, 255, 255, 0.3); /* browsers */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=”#4cffffff”, endColorstr=”#4cffffff”); /* IE */
This is now possible with custom properties: .brown { –rgb: 118, 76, 41; } .green { –rgb: 51, 91, 11; } a { display: block; position: relative; } div { position: absolute; bottom: 0; background-color: rgba(var(–rgb), 0.8); } a:hover div { background-color: rgba(var(–rgb), 1); } To understand how this works, see How do I apply … Read more
Here’s a version that’s much simpler – not sure how performant it is. Heavily based on some django snippet I found while building RGBA -> JPG + BG support for sorl thumbnails. from PIL import Image png = Image.open(object.logo.path) png.load() # required for png.split() background = Image.new(“RGB”, png.size, (255, 255, 255)) background.paste(png, mask=png.split()[3]) # 3 … Read more