css - 在相同颜色的不透明背景上可见的半透明元素(在 Chrome 中)

Question

当某些标签的关联复选框被选中时，我会在某些标签上放置一个透明的灰色框。该框与背景颜色相同，但部分透明。

如果我在 Photoshop 或 Illustrator 中做这样的事情，半透明框将不可见，因为它会与背景完美融合。

但在我测试的大多数浏览器中(Chrome、Brave、Epic、Vivaldi、Firefox、Waterfox)，框看起来比背景稍微暗一些。

我在这台机器上可用的浏览器中，只有 Safari 以我预期的方式显示该框。

我有什么想法可以让它完美地融入所有浏览器吗？

这是我的代码:

body {
  background-color: rgb(51,51,51);
  color: white;
  padding:30px;
}
div#checklist input[type=checkbox] + label::before {
  content: '';
  display: inline-block;
  width: 0%;
  height: 1.2em;
  position: absolute;
  z-index: 0;
}
div#checklist {
  position: relative;
  overflow-x: hidden;
}
div#checklist input[type=checkbox]:checked + label::before {
  content: '';
  background-color: rgba(51,51,51,.7);
  width: 100%;
}

<div id="checklist">
  <input type="checkbox" name="seo-1" id="seo-1"value="seo-1"><label for="seo-1"> first item
  </label><br>
  <input type="checkbox" name="seo-2" id="seo-2"value="seo-2"><label for="seo-2"> second item
  </label><br>
  <input type="checkbox" name="seo-3" id="seo-3"value="seo-3"><label for="seo-3"> third item
  </label><br>
  <input type="checkbox" name="seo-4" id="seo-4"value="seo-4"><label for="seo-4"> fourth item
  </label><br>
</div>

编辑:我最终不需要这样做，但我仍然很好奇为什么半透明框会在相同颜色的不透明背景上可见。

Answer 1

试试下面

div#checklist input[type=checkbox]:checked + label::before {
    content: '';
    background-color: rgba(128, 128, 128, 0.24);
    width: 100%;
}