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

Posted 2023-03-06

【中文标题】如何在悬停时使按钮内的文本透明？背景应该保持不变

【英文标题】：How to make text inside a button transparent on hover? background should remain the same though

【发布时间】：2017-12-31 15:59:33

【问题描述】：

如何使按钮内的文本在悬停时透明？但是背景应该保持不变。我试过不透明度：0；但它使整个按钮不可见。帮助。我尝试了以下代码。

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

</style>

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

【问题讨论】：

我觉得你可以用color: rgba(255,255,255,0)

我试过了，但它使整个块变成白色。让我澄清一下，成功按钮是绿色的，所以我希望按钮的背景保持绿色。但我想让按钮的文本透明，以便我可以看到我的背景图像作为文本背景颜色。

我完全明白你想要什么。但我想知道为什么颜色属性上的 rgba 不应该......它应该只适用于颜色属性，所以文本..为什么你的整个块都变白了？并且 rgba 使用 0 的 alpha 通道，所以它应该变得透明......你使用什么浏览器？

***.com/a/10835846/7111561

我正在使用 Chrome。在 Firefox 和 Opera 上也试过。仍然，问题没有解决。

【参考方案1】：

您需要为color 规则使用rgba(color,color,color,opacity);。

试试这个小提琴： https://jsfiddle.net/reala/5xq3mj66/

编辑：好的 - 我想我明白你的要求了。

您希望文本在悬停时为 TRANSLUCENT（但不是不可见，即“透明”），以便您可以通过文本看到背景。

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

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

记得删除您的opacity: 0，或将其重置为opacity: 1 - 否则会使整个按钮透明。这不是你想要的。

【讨论】：

我尝试了您建议的所有方法，但仍然无法解决问题。文本颜色变为透明，但它不显示背景图像（我的网站的主要背景图像）通过它。相反，它变成按钮背景颜色的任何指定颜色的块。例如。我的按钮背景是“绿色”，我的页面背景是“蓝色图像”。所以它应该在悬停时显示“蓝色图像通过”文本。不是按钮背景颜色，即“绿色”。希望你现在明白我想说什么。

@VipulTyagi 听起来您正试图在您的“按钮文本”形状中创建一个“洞”通过您的按钮...以显示您的“蓝色背景” "，悬停时，仅在按钮的文本区域中。我认为这是不可能的，因为“按钮文本”是“按钮”的子项，而不是“主要背景”的直接子项。当您降低按钮文本颜色的“透明度”时，它将显示“背后”的任何内容。在您的情况下，这是它的父级“按钮”。因此，降低透明度将正确显示绿色，而不是蓝色。

如果你查看这个更新的小提琴，你可能会得到一些关于如何发挥创造力的想法。此示例使“按钮”变为透明，以显示蓝色，而文本仍然可见。这可能不是您想要的——而是朝着正确方向迈出的一步。您最好的选择可能是考虑为您的文本使用“css 图像蒙版”（您必须查看它），并通过使用“图像”作为文本颜色来假装它是透明的。这是我指的小提琴jsfiddle.net/reala/5xq3mj66/6

好的。我得到了它。非常感谢您的帮助。 :) 很想向你们学习更多。