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

Question

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

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

我四处搜索并尝试制作另一个具有白色背景且与按钮宽度和高度相同的元素，然后对其进行绝对定位。然后我给它和 -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, 220, 172, .22);
}

.btn_test3:hover {
  background-color: rgba(105, 220, 172, .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, 220, 172, .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>

Answer 1

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

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

你的情况是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, 247, 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>

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

What's the best way to make a transparent background on a button inside a container, without showing the color of the container behind it?

css

hover

opacity