如何实现容器内按钮hover半透明背景不透出容器底色且无需额外包裹？

不需要添加额外的HTML包裹层，也不需要额外的DOM元素，仅通过CSS多重背景特性就能实现需求，核心逻辑是：hover时给按钮叠加两层背景，底层为纯白色，上层为你需要的半透明遮罩色，两层都属于按钮自身的背景，不会透出父容器的底色。

修改要点 #

仅需要调整按钮的hover样式，将原来的单一半透明背景改为多层背景即可：

/* 原hover代码 */
.btn_test:hover {
    background-color: rgba(105, 220, 172, .22);
}

/* 修改后的hover代码 */
.btn_test:hover {
    /* 上层是半透明遮罩，下层是纯白色背景，用逗号分隔，上层写在前 */
    background: linear-gradient(rgba(105, 220, 172, .22), rgba(105, 220, 172, .22)), #fff;
}

原方案失效原因说明 #

• 直接设置半透明background-color时，按钮原有的白色背景会被替换，半透明层下方没有白色打底，自然透出父容器的背景色
• 尝试用z-index为负的子元素/伪元素做白色打底失效的原因：按钮自身设置了position: relative后，若给按钮本身设置了z-index值，会创建新的堆叠上下文，内部子元素的z-index再低也不会跑到按钮自身背景的下方，导致白色打底层无法生效
• 额外包裹层的方案虽然可用，但会增加冗余的HTML结构，维护成本更高

完整修改后的代码示例 #

.container {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background: #3FAF6C;
}
.containerWhite {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  border: 1px solid black;
}
.btn_test {
  position: relative;
  white-space: nowrap;
  border: 1px solid black;
  width: auto;
  margin-left: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}
/* 仅修改这部分即可 */
.btn_test:hover {
  background: linear-gradient(rgba(105, 220, 172, .22), rgba(105, 220, 172, .22)), #fff;
}

<div class="container">
  <button class="btn_test" type="button">绿色容器内的按钮</button>
</div>
<div class="containerWhite">
  <button class="btn_test" type="button">白色容器内的按钮</button>
</div>

修改后两个容器内的按钮hover效果完全一致，不需要任何额外HTML结构。

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