如何使输入字段的不透明度不影响其中的文本颜色？

Posted 2023-03-06

【中文标题】如何使输入字段的不透明度不影响其中的文本颜色？

【英文标题】：How do you make an input field opacity not effect the text color inside it?

【发布时间】：2013-09-14 07:24:16

【问题描述】：

我有一个深色/黑色背景图像和一个白色输入字段。我给输入字段的不透明度为 50%，我希望文本/值是纯白色 (#fff)。但是当我应用不透明度时，它会影响输入元素的背景和文本。如何只更改输入框的背景？

【问题讨论】：

请发布您的代码。

查看这个答案：***.com/a/18721236/2059996

【参考方案1】：

为此，您可以使用background-color: rgba(0, 0, 0, 0.5)。前三个数字是 rgb（红、绿、蓝）格式的背景颜色，第四个数字是从 0 到 1 的不透明度级别。

【参考方案2】：

从你所说的来看，你只希望背景受到影响。

为了使背景（部分）透明，你必须使用一个

a) PNG 背景

或

b) RGBa 背景 - 见 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

像这样：background:rgba(0,0,0,0.2);

IE8 及以下版本不支持此功能。

【参考方案3】：

问题是您正在更改整个元素的不透明度。因此，所有子元素都严格继承透明属性。

您可以做一些事情。

您可以只定位背景并将其设置为 RGBA 值：

background: rgba(255, 255, 255, 0.5);

这在 IE8 及之前的版本中不起作用，因此您可以使用使用线性渐变过滤器的解决方法：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );

您会注意到前 2 个十六进制位是 #80。这不是错误，也不是十进制值。十六进制以 16 为底，这使 #80 成为中点，因此将不透明度设置为 50%。我知道这有点令人困惑！

您可以从输入字段中删除样式，而是在您的输入字段周围添加一个包装器并为其设置样式。

您可以使用半透明 PNG 作为背景图像并将其设置为重复。

【讨论】：

没错。最后一个参数是从零到一的不透明度。

【参考方案4】：

为什么不简单地制作一个半透明的 png 并将其用作背景图像，而不是设置输入不透明度？或者，如果您不必支持 IE8，也可以使用rgba()。