以数学方式计算不透明度值
Posted
技术标签:
【中文标题】以数学方式计算不透明度值【英文标题】:Calculating opacity value mathematically 【发布时间】:2012-02-03 08:02:46 【问题描述】:不透明度是如何数学计算的?
在 Photoshop、CSS 等中有 opacity 值。实际上这个 opacity 是图层的透明行为。我们都知道。 但它是如何数学计算的呢?有什么公式可以计算不透明度吗?
通过设置不透明度值,那里发生了什么?
以纯色层为例:Layer 1(前景层)和Layer 2(背景层)
第 1 层是红色(例如颜色值 A
),第 2 层是白色(例如颜色值 B
)。
当我们将不透明度(比如p
)设置为第 1 层时,我们可以设置 0.5 或 50% 并获得白色红色(比如颜色值 X
)。
为了得到这个值X
我应该在数学上做什么?
即。
X = (things which will be a relation containing p, A and B)
我想知道找到X
的确切数学方程式。
另外,如果我有方程式,并且颜色值本质上是十六进制的,那么使用十六进制计算器可以得到正确的结果吗?
【问题讨论】:
【参考方案1】:将C1 = (R1,G1,B1)
和C2 = (R2,G2,B2)
组合成新颜色的公式C3,其中C2 覆盖在 C1 之上,不透明度 p 通常为( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 )
。
更多信息请参见Wikipedia article on transparency。
【讨论】:
【参考方案2】:下面的javascript给出了一种可以手动计算不透明度颜色值的方法:
function calculateTransparentColor(foregroundColor, backgroundColor, opacity)
if (opacity < 0.0 || opacity > 1.0)
alert("assertion, opacity should be between 0 and 1");
opacity = opacity * 1.0; // to make it float
let foregroundRGB = colorHexToRGB(foregroundColor);
let backgroundRGB = colorHexToRGB(backgroundColor);
let finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity);
let finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity);
let finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity);
return colorRGBToHex(finalRed, finalGreen, finalBlue);
var COLOR_REGEX = /^#([0-9a-fA-F]2)([0-9a-fA-F]2)([0-9a-fA-F]2)$/;
function colorHexToRGB(htmlColor)
let arrRGB = htmlColor.match(COLOR_REGEX);
if (arrRGB == null)
alert("Invalid color passed, the color should be in the html format. Example: #ff0033");
let red = parseInt(arrRGB[1], 16);
let green = parseInt(arrRGB[2], 16);
let blue = parseInt(arrRGB[3], 16);
return "r":red, "g":green, "b":blue;
function colorRGBToHex(red, green, blue)
if (red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255)
alert("Invalid color value passed. Should be between 0 and 255.");
let hexRed = formatHex(red.toString(16));
let hexGreen = formatHex(green.toString(16));
let hexBlue = formatHex(blue.toString(16));
return "#" + hexRed + hexGreen + hexBlue;
function formatHex(value)
value = value + "";
if (value.length == 1)
return "0" + value;
return value;
// Now we test it!
let theColor = calculateTransparentColor('#ff0000', '#00ff00', 0.5)
console.log("The color #ff0000 on a background of #00ff00 with 50% opacity produces: " + theColor);
【讨论】:
谢谢! jsbin.com/OxEPEqo/2/edit -- 我需要相反的,即第二组输入。caculateTransparentColor
方法似乎已翻转了前景和背景。这是foreground * opacity
,而不是foreground * (1 - opacity)
。已提交编辑。【参考方案3】:
两个透明像素混合的结果公式:
C1=[R1,G1,B1] 是前景像素颜色。
C2=[R2,G2,B2] 是背景像素颜色。
p1 是前景像素的不透明度百分比。
p2 是背景像素的不透明度百分比。
New_Pixel_Color = (p1*c1+p2*c2-p1*p2*c2)/(p1+p2-p1*p2)
New_Pixel_opacity = p1+p2-p1*p2
您可以测试并享受它!
【讨论】:
如果您想为您的网站做广告,您应该在您的个人资料中这样做。以上是关于以数学方式计算不透明度值的主要内容,如果未能解决你的问题,请参考以下文章
什么是证书透明度(Certificate Transparency)?