我有一个深色/黑色背景图像和一个白色输入字段。我给输入字段的不透明度为 50%，我希望文本/值是纯白色 (#fff)。但是当我应用不透明度时，它会影响输入元素的背景和文本。如何只更改输入字段的背景？
问问题
36090 次
4 回答
33
为此，您可以使用background-color: rgba(0, 0, 0, 0.5). 前三个数字是 rgb（红、绿、蓝）格式的背景颜色，第四个数字是从 0 到 1 的不透明度级别。
于 2013-09-10T14:21:17.050 回答
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 及以下版本中不受支持。
于 2013-09-10T14:24:25.527 回答
2
问题是您正在更改整个元素的不透明度。因此，所有子元素都严格继承透明属性。
您可以做几件事。
您可以仅定位背景并将其设置为 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 作为背景图像并将其设置为重复。
于 2013-09-10T14:21:56.800 回答
1
为什么不简单地制作一个半透明的 png 并将其用作背景图像而不是设置输入不透明度呢？或者，如果您不必支持 IE8，您也可以使用rgba()。
于 2013-09-10T14:21:46.100 回答