在容器内的按钮上制作透明背景而不显示其背后容器的颜色的最佳方法是什么？

问题描述

我正在尝试让按钮在悬停时显示略微透明的背景，如果包含按钮的元素具有白色背景，它就可以正常工作。

当容器元素具有非白色背景时，按钮上的透明背景最终会显示容器的背景。

我四处搜索并尝试制作另一个具有白色背景和按钮宽度和高度相同的元素，然后将其绝对定位。然后我给它和 -1 的 z-index 以留在按钮上的文本后面。

基本上，我想让悬停看起来像示例 2 中的那样，但是当它位于绿色容器内时。

编辑：我能够通过为按钮使用另一个容器来使其工作，为其提供自动的宽度和高度以及白色背景，如示例 5 所示。但是，我想知道是否有更好的解决方案，因为我需要为非白色容器上的每个其他按钮使用额外的包装器。

在下面的片段中：

示例 1：悬停时，容器的颜色最终显示出来。

示例 2：悬停时正确的颜色。

示例 3：在这里我尝试使用另一个具有白色背景的元素并将其放置在按钮后面。但它与示例 1 存在相同的问题。

示例 4：这里我尝试使用 z-index，但根本没有显示悬停效果。

示例 5：它有效，但我不确定这是否是最好的方法。

.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;
    /*z-index: 10;*/
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}

.btn_test2 {
    position: relative;
    white-space: Nowrap;
  border: 1px solid black;
    width: auto;
    margin-left: 8px;
    /*z-index: 10;*/
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}

.btn_test3 {
    position: relative;
    white-space: Nowrap;
  border: 1px solid black;
    width: auto;
    margin-left: 8px;
    z-index: 10;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}



.btn_test:hover {
    background-color: rgba(105,220,172,.22);
}

.btn_test2:hover {
    background-color: rgba(105,.22);
}

.btn_test3:hover {
  background-color: rgba(105,.22);
  z-index: 15;
}

.btn_background {
  position: absolute;
  background: #FFF;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border-radius: 8px;
  z-index: -1;
}

.btn_test::before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    background-color: #FFF;
}

.btn_test4 {
    white-space: Nowrap;
  border: none;
    width: auto;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}

.btn_test4:hover {
  background-color: rgba(105,.22);
}

.btn-white-background {
  width: auto;
  height: auto;
  border: 1px solid black;
  border-radius: 8px;
  background: #FFF;
}

<div class="container">
  <button class="btn_test" type="button">Example 1</button>
</div>
<div class="containerWhite">
    <button class="btn_test" type="button">Example 2</button>
</div>
<div class="container">
  <button class="btn_test2" type="button">Example 3
    <div class="btn_background"></div>
  </button>
</div>

<div class="container">
  <button class="btn_test3" type="button">Example 4
    <div class="btn_background"></div>
  </button>
</div>

<div class="container">
  <div class="btn-white-background">
    <button class="btn_test4" type="button">Example 5
    </button>
  </div>
</div>

解决方法

根据您的描述，您似乎并不想要稍微透明的背景，而只是想要浅绿色的背景。（根据定义部分透明意味着您可以部分看到它）

那为什么不直接使用你想要的颜色呢？

就您而言，它是 rgb(222,247,237)

.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;
  /*z-index: 10;*/
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF;
}

.btn_test:hover {
  background-color: rgb(222,237);
}

<div class="container">
  <button class="btn_test" type="button">Example 1</button>
</div>
<div class="containerWhite">
  <button class="btn_test" type="button">Example 2</button>
</div>

hover opacity