Html 如何使鼠标悬停时按钮内的文本透明？但背景应该保持不变

如何使鼠标悬停时按钮内的文本透明？但背景应该保持不变。我尝试了不透明度：0；但它使整个按钮隐形。救命啊。我尝试了下面的代码

<style>
.btn:hover {
    background-color: #ededed !important;
    color: #3c3c3c !important;
    opacity:0;
}
</style>

<button class=" btn btn-success  btn-lg">test button</button>

.btn:悬停{
背景色：#ededed！重要；
颜色：#3c！重要；
不透明度：0；
}
测试按钮

您需要使用

rgba（颜色、颜色、颜色、不透明度）用于
颜色
规则

试试这把小提琴：

编辑：好的-我想我理解你的要求

您希望悬停时文本是半透明的（但不是不可见的，这是“透明的”），这样您就可以通过文本看到背景

非常类似的解决方案，但将rgba的不透明度更改为非常低的值，如0.3。。。例如：

.btn:hover {
   color: rgba(0,0,0,0.3);
}

请记住删除您的
不透明度：0
，或将其重置为
不透明度：1
——否则将使整个按钮透明。这不是您想要的。
您需要使用
rgba（颜色、颜色、颜色、不透明度）用于
颜色
规则

试试这把小提琴：

编辑：好的-我想我理解你的要求

您希望悬停时文本是半透明的（但不是不可见的，这是“透明的”），这样您就可以通过文本看到背景

非常类似的解决方案，但将rgba的不透明度更改为非常低的值，如0.3。。。例如：

.btn:hover {
   color: rgba(0,0,0,0.3);
}

请记住删除您的
不透明度：0
，或将其重置为
不透明度：1
——否则将使整个按钮透明。这不是你想要的。
我想你可以使用
颜色：rgba（255255,0）
我试过了，但它使整个块变白了。让我澄清一下，成功按钮是绿色的，所以我希望按钮的背景保持绿色。但是我想使按钮的文本透明，这样我就可以看到我的背景图像作为文本的背景色。我完全理解你想要什么。但是我想知道为什么颜色属性上的rgba不应该。。。它应仅应用于颜色属性，以便文本。。为什么你的整个街区都变白了？rgba使用alpha通道和0，所以它应该是透明的。。。你在用什么浏览器？我在用Chrome。在Firefox和Opera上也试用过。尽管如此，这个问题仍然没有解决。我想你可以使用
color:rgba（255255255,0）
我试过了，但它使整个块变为白色。让我澄清一下，成功按钮是绿色的，所以我希望按钮的背景保持绿色。但是我想使按钮的文本透明，这样我就可以看到我的背景图像作为文本的背景色。我完全理解你想要什么。但是我想知道为什么颜色属性上的rgba不应该。。。它应仅应用于颜色属性，以便文本。。为什么你的整个街区都变白了？rgba使用alpha通道和0，所以它应该是透明的。。。你在用什么浏览器？我在用Chrome。在Firefox和Opera上也试用过。但是，这个问题还没有解决。我尝试了你建议的每一件事，但仍然无法解决问题。文本颜色变为透明，但不会通过它显示背景图像（我的网站的主背景图像）。相反，它将成为按钮背景颜色为的任何指定颜色的块。例如我的按钮背景是“绿色”，我的页面背景是“蓝色图像”。因此，它应该通过悬停文本显示“蓝色图像”。不是按钮的背景色，即“绿色”。希望你现在明白我想说的。@VipulTyagi听起来你想通过按钮在“按钮文本”的形状上创建一个“孔”。。。若要显示“蓝色背景”，请将鼠标悬停在按钮的文本区域。我认为这是不可能的，因为“按钮文本”是“按钮”的子项，而不是“主要背景”的直接子项。当您降低按钮文本颜色的“透明度”时，它将显示“背后”的内容。在您的情况下，这就是它的父项“按钮”。因此，降低透明度将正确地显示绿色，而不是蓝色。如果你检查这个更新的小提琴，你可能会得到一些关于如何发挥创造力的想法。本例中，“按钮”变为透明，以显示蓝色，而文本仍然可见。这可能不是你想要的——而是朝着正确方向迈出的一步。你最好的选择可能是为你的文本使用一个“css图像掩码”（你必须查找它），并通过使用一个“图像”作为你的文本颜色来假装它是透明的。这是我指的小提琴，好的。我得到了它。非常感谢你的帮助。：）我很想从你们身上学到更多。我尝试了你们的每一个建议，但仍然无法解决问题。文本颜色变为透明，但不会通过它显示背景图像（我的网站的主背景图像）。相反，它将成为按钮背景颜色为的任何指定颜色的块。例如我的按钮背景是“绿色”，我的页面背景是“蓝色图像”。因此，它应该通过悬停文本显示“蓝色图像”。不是按钮的背景色，即“绿色”。希望你现在明白我想说的。@VipulTyagi听起来你想通过按钮在“按钮文本”的形状上创建一个“孔”。。。若要显示“蓝色背景”，请将鼠标悬停在按钮的文本区域。我认为这是不可能的，因为“按钮文本”是“按钮”的子项，而不是“主要背景”的直接子项。当您降低按钮文本颜色的“透明度”时，它将显示“背后”的内容。在您的情况下，这就是它的父项“按钮”。因此，降低透明度是合理的