Css 元素不透明度，但不包括边框

我有个问题，有人问过类似的问题，但我还不明白

我想做的是为一个元素设置0.7的不透明度，但只对内容而不是边框，我希望边框保持全色。下面是一些示例代码：

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

结果是我的输入元素有不透明度，但甚至有边框，有人能告诉我如何只在内容而不是边框中设置不透明度吗

---

谢谢。

对颜色和背景使用

rgba

语法，对整个元素不使用不透明度

---

您可以使用

background:rgba

属性获得所需的结果，该结果只会影响您的

父项

而不会影响

子项

，也可以用于

父项

的

边框

CSS

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #000;
    border-radius: 3px;
    background:rgba(255,0,0,0.1);
}

我没有看到这个问题是关于输入元素的，但也许我的答案会帮助其他人，所以我们开始吧

正如其他海报所说，您可以使用
rgba
语法定义背景色

如果要更改的元素中有嵌套的元素，还可以使用此css对其应用
不透明度
：

#element > * {
    opacity:0.8;
}

以下是一个例子：

如果您想为元素创建背景图像，我认为最好的方法仍然是将其包装在带有边框的容器中。
不透明度背景，而不是边框css


html

最简单的方法是将边框赋给围绕输入的另一个元素。@RohitAzad非常感谢。我不知道我怎么没想到会这样。这正是我想要的。@RohitAzad您的解决方案不影响文本，请检查我您忘记对输入中的文本应用半透明
#element > * {
    opacity:0.8;
}

<div id="element"></div>

#element{
    width: 156px;
    height: 156px;
    border: 2px solid #96d5ea;
    background:rgba(150, 213, 234,1);
    margin: 35px auto;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: all 1s ease;
}

#element:hover {
    background:rgba(150, 213, 234,0);
    -webkit-transform: rotate(315deg);
}