使用::before和::after制作div悬停背景时重叠破坏透明度如何解决

• 两个伪元素默认以自身中心为旋转基点，沿X轴旋转后，上下两块的中间区域会发生重叠
• 半透明背景叠加后，重叠区域的透明度会比其他区域低，看起来颜色更深，破坏了整体视觉效果

有两种常用的修复方式，你可以按需选择：

方案1：调整旋转基点消除重叠 #

修改两个伪元素的transform-origin属性，让它们分别沿上下边旋转，从根源上避免中间区域重叠：

div::before{
  top:0;
  transform-origin: top center; /* 新增：以顶部为旋转基点 */
  transform: rotateX(-75deg);
}
div::after{
  bottom:0;
  transform-origin: bottom center; /* 新增：以底部为旋转基点 */
  transform: rotateX(75deg);
}

调整后如果还有轻微重叠，可以把伪元素的height从50px适当调小，比如改成45px即可。

方案2：统一透明度避免叠加变色 #

如果你需要保留原来的旋转逻辑，不想调整基点，可以统一控制透明度，避免叠加后颜色变深：

1. 给父级div新增isolation: isolate属性，创建独立堆叠上下文
2. 把伪元素的半透明背景改成纯黑色#000，再给两个伪元素统一设置opacity: 0.3（数值和你原来的#00000050透明度一致）
   完整修改代码如下：

div{
  width:200px;
  padding: 18px;
  margin: 10px auto;
  text-align:center;
  position: relative;
  perspective: 100px;
  z-index: 1;
  isolation: isolate; /* 新增 */
}
div:hover{
  color:#fff;
}
div:hover::before, div:hover::after{
  content: "";
  display: block;
  background-color: #000; /* 修改为纯黑 */
  opacity: 0.3; /* 新增统一透明度 */
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0%;
  z-index: -1;
}
div::before{
  top:0;
  transform: rotateX(-75deg);
}
div::after{
  bottom:0;
  transform: rotateX(75deg);
}

这个方案下哪怕两个伪元素有重叠，整体透明度也会保持一致，不会出现局部颜色变深的问题。

内容的提问来源于stack exchange，提问作者Schnitzler