Question

如果我通过javascript中的rgba（r，g，b，a）将alpha值设置为1以外的任何值，则浏览器设置的实际值略有不同。但CSS中的值设置完全匹配。

请参阅代码示例 code-pen-site

    <head>    
      <script type="text/javascript" language="javascript">
        window.onload=function() {
        document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)";
        }
      </script>
    </head>

    <body>
      <p>RGB colors with opacity:</p>
      <p id="p1">Red</p>
      <p id="p2">Green</p>
    </body>

使用Chromium浏览器
按F12激活Inspector
检查“红色”。
“Red”将background-color设置为rgba（255,0,0,0.3），但在Inspector中，其值为rgba（255,0,0,0.298039）
“Green”将background-color设置为rgba（0,255,0,0.3），Inspector中的值与之匹配。

为什么通过Javascript设置CSS颜色然后数字会改变？

Answer 1

首先，我原来的观察是不正确的。如果你点击＆＃34; Computed＆＃34;选项卡来检查背景clor，这两种CSS规则在＆＃39; style＆＃39;标记和元素内联。我

在chromium source code 此实现解释了alpha值<0.00的差异

// Convert the floating pointer number of alpha to an integer in the range [0, 256),
// with an equal distribution across all 256 values.
int alphaComponent = 
    static_cast<int>(
        clampTo<double>(alpha, 0.0, 1.0) * nextafter(256.0, 0.0));

如果alpha为0.3，则alphaComponent变为0.298039。（如果我将alpha设置为[0.0,1.0]中的任何浮点数，则webInspector显示的数字与从上面的公式获取的alphaComponent值匹配。

CSS中的（Chromium）alpha颜色值（以rgba为单位）和javascript

1 个答案: