半透明的颜色和半透明的覆盖物之间有相关性吗？

Question

之间是否存在任何关联：

1. 将半透明内容置于纯色背景上；
2. 在纯色内容上放置半透明的覆盖层。

HTML：

<p><span>Lorem</span></p>

CSS 1：

p {
    position: relative;
    background: white;
}
span {
    color: black;
    opacity: .5;
}

CSS 2：

p:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: white;
    opaity: .5;
    z-index: 999;
}
span {
    color: black;
}

我不能总是从视觉上分辨出差异，所以我想也许有某种比例，或者这些完全不同？

Answer 1

如果两者的不透明度均为0.5 ，则没有区别。

从逻辑上讲，如果黑色文本的不透明度为0.3，则要使用白色叠加层获得相同的效果，则该叠加层需要比不透明的黑色文本具有0.7的不透明度。

 var text = document.getElementById("a"); var overlay = document.getElementById("overlay"); document.getElementById("opacity").addEventListener("input", function() { text.style.opacity = this.value; overlay.style.opacity = 1-this.value; console.clear(); console.log( this.value ); }); 

 #test{ display: inline-block; position:relative; font-size: 3em; font-weight: bold; color: #000; } #a{ } #b{ position: absolute; overflow: hidden; width: 50%; height:100%; top:0; left:0; } #overlay{ background:#fff; position: absolute; width:100%; height:100%; top:0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="opacity" type="range" val=1 step=0.1 min=0 max=1> <div id="test"> <div id="a">LOREM</div> <div id="b">LOREM <div id="overlay"></div></div> </div> 

上面的控件控制了两个不透明度，但是可以通过控制文本颜色（如rgba(0,0,0, 0.5)和覆盖图的背景颜色（如rgba(255,255,255, 0.5)来实现完全相同的效果

Answer 2

如果您对内容使用不透明度，则背景和文本是透明的..因此，文本看起来不太好..但是，如果您对背景使用不透明度，则背景仅是透明的，不会影响文本。