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%;
}

半透明元素（在Chrome中）在相同颜色的不透明背景上可见

1 个答案: