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

Question

我想让一个按钮在悬停时显示一个稍微透明的背景，如果包含按钮的元素有一个白色的背景，它会工作得很好。

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

我已经搜索了周围，并试图使另一个元素与白色背景和相同的宽度和高度的按钮，然后绝对位置它。然后我给它的z-index为-1，以保持在按钮上的文本后面。

基本上，我想使悬停看起来像例2，但当它在绿色容器内。

编辑:我能够使它工作通过使用另一个容器的按钮，给它的宽度和高度auto和一个白色的背景，如例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>