html中div重叠时如何去除像素？ [已关闭]

Question

我以让两个 div 重叠的方式定位它们。但这样做会使重叠部分更亮。 顶部和底部可以看到更亮的像素，放大时更是如此。 如何让这些 div 显示相同一致的颜色？

这些 div 具有以下样式：

  width: 0.75rem;
  height: 0.25rem;
  background: #b4b4b4;
  border-radius: 9999px;
  transform: translateZ(0px) translateX(${({ $inverted }) => ($inverted ? "-" : "")}17%);
  transition: all 0.2s;

父容器是一个带有

display: flex;

的 div

页面上的所有元素都有

box-sizing: border-box;

且

-webkit-font-smoothing: antialiased;

来自 html 样式。

尝试使用相对位置和绝对位置来定位它们，并且还进行变换。到目前为止，总是会出现更亮的像素。

示例

Answer 1

您可以使用 css 的 z-index 属性：

.div1, .div2 {
  position: relative;
  z-index: 1; 
}

或者您可以使用不透明度功能并将两者都设置为 1:

.div1, .div2 {
  position: relative;
  opacity: 1;
}