Html 如何使输入字段的不透明度不影响其中的文本颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18721382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make an input field opacity not effect the text color inside it?
提问by Jordan Simon
I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?
我有一个深色/黑色背景图像和一个白色输入字段。我给输入字段设置了 50% 的不透明度，我希望文本/值是纯白色 (#fff)。但是当我应用不透明度时，它会影响输入元素的背景和文本。如何只更改输入字段的背景？
回答by Beniamin Szabo
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.
为此，您可以使用background-color: rgba(0, 0, 0, 0.5). 前三个数字是 rgb（红、绿、蓝）格式的背景颜色，第四个数字是从 0 到 1 的不透明度级别。
回答by harley_woop
From what you say, you only want the backgroundto be affected.
从你所说的来看，你只希望背景受到影响。
For backgrounds to be (partially) transarent, you have to use a
要使背景（部分）透明，您必须使用
a) PNG background
a) PNG 背景
or
或者
b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
b) RGBa 背景——见https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
Like so: background:rgba(0,0,0,0.2);
像这样： background:rgba(0,0,0,0.2);
This is not supported in IE8 and below.
这在 IE8 及更低版本中不受支持。
回答by Matthew R.
The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.
问题是您正在更改整个元素的不透明度。因此，所有子元素都严格继承透明属性。
There are a few things you can do.
您可以做一些事情。
You could target only the background and set it to an RGBA value:
background: rgba(255, 255, 255, 0.5);This wont work in IE8 and before, so you can use a workaround using linear gradient filters:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!
You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.
You could use a semi-transparent PNG as the background image and set it to repeat.
您可以仅针对背景并将其设置为 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 作为背景图像并将其设置为重复。
