元素不透明度而不是边界(Element opacity but not border)

嗯，我有这个问题，我看到有人已经问过类似的事情，但是这个我还不知道。

我想要做的是0.7的不透明度设置为一个元素，但只是到内容，而不是到边界，我希望边框留颜色齐全。 一些示例代码在这里：

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

其结果是，我的输入元素具有不透明性，但即使边界，有人能告诉我如何设置不透明度只是在内容，但没有边界？

谢谢。

Answer 1:

使用rgba语法无论是颜色和背景，而不是对整个元素使用透明度

演示dabblet

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

Answer 2:

我没有看到这个问题是关于输入元素，但也许我的回答可以帮助别人，所以在这里我们去。

至于其他的海报说，你可以使用rgba语法定义背景色。

如果有，你想改变一个嵌套的元素，你还可以将opacity将它们与这个CSS：

#element > * {
    opacity:0.8;
}

下面是一个例子： 的jsfiddle

如果你想为你的元素的背景图片，我觉得最好的办法还是把它包起来与边框的容器。

Answer 3:

不透明的背景，但没有边框的CSS

这里演示

HTML

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

CSS

#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);
}

Answer 4:

你可以使用background:rgba属性您想要的结果，这将只影响你的parent没有child ，也为border的parent 。

CSS

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

DEMO

文章来源: Element opacity but not border