Question

嗯，我有这个问题，我看到有人已经问了类似的东西，但我还不明白。

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

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

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

感谢的。

Answer 1

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

demo 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语法来定义背景颜色。

如果您想要更改的元素中有嵌套元素，您还可以使用此css将opacity应用于它们：

#element > * {
    opacity:0.8;
}

以下是一个示例：JsFiddle

如果你想为你的元素提供背景图片，我认为最好的方法仍然是将它包装在带边框的容器中。

Answer 3

不透明背景但不是边框css

Demo here

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的{{1}}。< / p>

<强> CSS

parent

DEMO

元素不透明但不是边框

4 个答案: