Question

之间是否存在任何相关性：

在纯色背景上放置半透明内容;
在纯色内容上放置半透明覆盖层。

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

如果你对内容使用不透明度，背景和文字是透明的..所以文字看起来不太好......但是如果你使用不透明度作为背景，背景只是透明的，那么它不受影响的文字..

半透明颜色和半透明覆盖层之间是否存在相关性？

2 个答案: