css – 元素不透明但不是边框

好吧,我有这个问题,我看到有人已经问了类似的东西,但我还不明白.

我想要做的是设置一个元素的不透明度为0.7但只是内容而不是边框​​,我希望边框保持全彩色.这里有一些示例代码：

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    opacity: 0.8;
}

结果是我的输入元素具有不透明度,但甚至是边框,有人可以告诉我如何在内容中设置不透明度而不是边框​​吗？

谢谢.

解决方法

对于颜色和背景使用rgba语法,而不对整个元素使用不透明度

demo dabblet

input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255,255,.8);
    color: rgba(0,.8);
}