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

Question

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

Answer 1

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

Answer 2

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

Answer 3

根据您的说法，您只希望背景受到影响。

对于（部分）透明的背景，您必须使用

a）PNG背景

或

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

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

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

Answer 4

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

你可以做一些事情。

1. 您只能定位背景并将其设置为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％。我知道，这有点令人困惑！

2. 您可以从输入字段中删除样式，而是在输入字段和样式周围添加包装。

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