如何做到让 input 背景可以设置透明度，边框也可以，但是里面的文字不透明呢 ？

Question

如何做到让 input 背景可以设置透明度，边框也可以，但是里面的文字不透明呢 ？

HTML： <input class="uName" name="userName" placeholder="Barcelona">

CSS: .uName{filter:Alpha(opacity=30); opacity: .3;}

只用 filter:Alpha 和 opacity 设置样式后，input 里面的文字也变成了透明的 。怎么才能让文字不透明呢 ？ 不改变 Html 的情况下。

Answer 1

都用rgba就可以了

background:rgba(0,0,0,0.2);
border: 1px solid rgba(0,0,0, 0.2);

Answer 2

background:rgba(0,0,0,0);

rgba中，a是透明度的意思，取值范围0-1，0是完全透明，1是完全不透明

这个不兼容ie9以下，推荐使用

background:none;

边框？你是指border吗？
还是outline(一般是蓝色的一个框)
试试下面这个

border: 0;
outline: none;

懂啦，

border: 3px soild rgba(255,255,255,0.5);

和上面道理一样

总结一下?

.uName{
    background: none;
    background: src(http://xxx.xxx.xxx/xx.png)
    background: rgba(255,255,255,0.3);
    outline: none;
    border: 3px solid #ffffff;
    border: 3px solid rgba(255,255,255,0.3);
}
//ie:"你让我咋办?，我也很无奈啊，要不你把我背景设置成png图片？"

Answer 3

可以用.uName{background-color: rgba(255,255,255,0)}