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

前端之家收集整理的这篇文章主要介绍了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);
}

猜你在找的CSS相关文章