16

好吧，我有这个问题，我看到有人已经问过类似的问题，但我还不明白。

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

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

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

谢谢。

4

4 回答 4

25

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

演示小程序

input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
}
于 2012-11-26T05:42:44.840 回答
3

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

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

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

#element > * {
    opacity:0.8;
}

这是一个例子：JsFiddle

如果您想要元素的背景图像，我认为最好的方法仍然是将其包装在带有边框的容器中。

于 2012-11-26T06:04:55.490 回答
1

不透明背景但不是边框 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);
}
于 2014-05-21T16:42:32.870 回答
0

您可以将background:rgba属性用于您想要的结果，这只会影响您的parentnot thechild和borderof parent。

CSS

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

演示

于 2012-11-26T05:45:46.007 回答