Three.js背景下按钮文字透明与CSS居中类冲突问题求助

添加center-mine类后按钮透明效果失效，核心原因是该类中的transform: translate(-50%, -50%)会给父容器创建新的堆叠上下文。mix-blend-mode: multiply需要元素能和外部的Three.js背景画布产生混合，但堆叠上下文会将子元素的混合范围限制在父容器内部，而父容器本身是透明的，因此无法显示出文字透明透背景的效果。

方案1：用Flex布局实现居中（推荐） #

通过给最外层容器设置Flex布局来实现居中，避免使用transform触发堆叠上下文：

修改CSS：

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
}
#app {
  position: absolute;
  inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.black {
  background: black;
  mix-blend-mode: multiply;
  font-size: 80px;
}
.font-exo{
  font-family: 'Exo 2', sans-serif;
}
.font-space-mono{
  font-family: 'Space Mono', monospace;
}

修改HTML：

<div id="app">
  <div class="text-white">
    <h1 class="font-space-mono text-xl tracking-wider">AlexisWeber</h1>
    <p class="font-exo text-3xl ">AN EVERLASTING DESIRE FOR THE UNKNOWN & UNTOLD</p>
    <a href="https://www.instagram.com/4rc71c0" class=" inline-block border px-4 py-2 rounded-md text-sm font-space-mono lowercase mt-3 hover:bg-white hover:text-gray-800 hover:border-gray hover:uppercase " >Watch Works</a>
    <a class="black" href="#">button</a>
  </div>
</div>

方案2：保留transform但调整堆叠上下文层级 #

如果一定要用transform居中，将center-mine类应用到最外层的#app容器上，确保按钮的混合对象是Three.js画布所在的层级：

修改CSS：

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
}
.center-mine{
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}
.black {
  background: black;
  mix-blend-mode: multiply;
  font-size: 80px;
}
.font-exo{
  font-family: 'Exo 2', sans-serif;
}
.font-space-mono{
  font-family: 'Space Mono', monospace;
}

修改HTML：

<div id="app" class="center-mine">
  <div class="text-white text-center">
    <h1 class="font-space-mono text-xl tracking-wider">AlexisWeber</h1>
    <p class="font-exo text-3xl ">AN EVERLASTING DESIRE FOR THE UNKNOWN & UNTOLD</p>
    <a href="https://www.instagram.com/4rc71c0" class=" inline-block border px-4 py-2 rounded-md text-sm font-space-mono lowercase mt-3 hover:bg-white hover:text-gray-800 hover:border-gray hover:uppercase " >Watch Works</a>
    <a class="black" href="#">button</a>
  </div>
</div>

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