半透明元素在相同颜色的不透明背景上可见(在Chrome中)
半透明元素在相同颜色的不透明背景上可见(在Chrome中)
提问于 2018-12-06 13:12:32
当相关的复选框被选中时，我在一些标签上放置了一个透明的灰色方框。该框的颜色与背景相同，但部分透明。
如果我在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>
编辑:我最终不需要这样做，但我仍然很好奇为什么半透明的方框会在相同颜色的不透明背景上可见。
回答 1
Stack Overflow用户
发布于 2018-12-06 14:39:38
请在下面尝试
div#checklist input[type=checkbox]:checked + label::before {
content: '';
background-color: rgba(128, 128, 128, 0.24);
width: 100%;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53645017
复制相关文章
相似问题
腾讯云开发者
