关于设置 \'opacity\' 属性的问题答案

【问题标题】：question about setting 'opacity' property关于设置 \'opacity\' 属性的问题
【发布时间】：2022-08-19 03:01:43
【问题描述】：

在这个网站上https://www.w3.org/TR/css-color-3/#transparency，
在 \' 的属性定义中不透明度\'，有以下文字：

\" 如果对象有孩子，那么效果就像孩子一样使用蒙版与当前背景混合，其中掩码的每个像素的值为\"

但这究竟是什么意思（如果有人可以给出示例代码）？

更新：
在下面的sn-p中，如何计算合成颜色div2使用属性定义不透明度

对于div2未覆盖的div1部分的颜色计算，我成功了：
co = Cs * αs + Cb * αb * ( 1 - αs )
Cs = div1 的背景颜色（RGB）；
αs = 背景颜色（alpha）* 不透明度 = 0,4 * 0 ,7
Cb = body 的背景颜色，αb = 1.0
co = (22/255 ,177/255 ,200 )* 0.4 * 0.7 + ( 77/255 , 100/255 , 200/255) * ( 1 - 0.4 * 0.7)
co = ( 0,24 0,476 0,64 )

屏幕截图允许读取 div1 的颜色（div1 中没有被 div2 覆盖的部分) .它们对应于合作

但是如何计算颜色div2?
body { background-color: rgb(77,100,150); }
<div style=\"
        width: 100px;
        height: 100px;
        background-color: rgba(22, 177, 200, 0.4);
        opacity: 0.7;\">
    div1
            <div style=\"
            width: 50px;
            height: 50px;
            background-color: rgba(100,200,50,0.5);\">div2</div>
        </div>
    

您已链接到 opacity: 属性。没有名为 transparency 的 CSS 属性。
W3.org 文章是针对浏览器编写者的实际 CSS 规范——它用作 web 开发参考有点过分了——如果你想要更容易理解的东西，我可能会推荐这篇文章：css-tricks.com/almanac/properties/o/opacity
@Dai，你是对的，我纠正了错误
不要让你的生活变得困难。那个复杂的句子意味着元素会有一些透明度，我想你已经知道不透明度是如何工作的......但是在幕后这个过程更复杂，你需要比这句话更多的东西来理解正在发生的事情
没有什么可以说明的，创建一个包含元素的 div 并将不透明度应用于该 div。一切都将是透明的，就这么简单。那就是那句话的意思

标签： css

【解决方案1】：

我设法解决了这个例子来找到 div2 的颜色：
首先我们应用简单的 alpha 合成公式：

co = Cs x as + Cb x ab x (1 - as) ; ao = as + ab (1-as)

这里：
Cs = (100/255, 200/255, 50/255);为 = 0.5
Cb = (22/255, 177/255, 200/255); ab = 0.4
……

co = (0.213, 0.53, 0.25); ao = 0.7

现在我们应用不透明度（在我的示例中，我将其设置为 0.7）

co = co * 0.7
ao = ao * 0.7

co=(0.15, 0.37, 0.18) ao = 0.49
我们用背景的颜色作曲：
（笔记co 是预乘的，所以我们申请： co = Cs + Cb ab (1-as)
Cs 是之前计算的颜色：(0.15 0.37 0.18) Cb 是背景颜色 (77/255,100/255,150/255)
div2 的屏幕截图给出了相同的颜色

【讨论】：