Question

我正在寻找一种在HTML中制作半透明表单元素的方法。

我知道CSS3有可爱的背景颜色：rgba（r，g，b，a）选项，同样使用半透明的.png作为背景图像通常可以工作，但我无法得到它为元素工作。

我主要针对的是现代浏览器（IE9和FF / Chrome / Safari的更新版本），我并不太热衷于向后兼容的解决方案（降级为纯色很好）。即使是在其中一些中有效的解决方案也是可以接受的，特别是如果预计其他浏览器的未来版本将支持它（我正在看你的IE！）。

Answer 1

请勿使用background-color:rgba，而是使用opacity:x。 IE9，Chrome，FF，Opera和Safari使用它来提高透明度。例如：

<select style="opacity:0.5;">

不透明度取0（完全透明）和1之间的值。

虽然您主要针对现代浏览器，但对于IE8及更早版本，您必须使用filter:alpha(opacity=50)（就上面的示例而言;此处不透明度接受0到100之间的值）。

总结

<select style="opacity:0.5;filter:alpha(opacity=50);">

为您提供现代浏览器以及IE8及更早版本支持的半透明选择控件。

使用这种技术，选择子项选项也将获得指定的不透明度，因此选项标签的文本也将逐渐消失。
Mikkel Fausing发现，将background-color:rgba(r,g,b,a)与-webkit-appearance: none;结合使用不会淡化文本，但是 - 如果应用于选择 - 它会删除指示此控件是下拉框的小箭头。例如：

<select style="background-color:rgba(0, 0, 0, 0.2); -webkit-appearance:none;">

HTML中的半透明<select>元素</select>

1 个答案: