元素的不透明度而不是边框

Question

嗯，我有一个问题并且看到有人已经问了类似的问题，但是我还没有理解。

我想做的是将元素的不透明度设置为0.7，但仅适用于内容而不适用于边框，我希望边框保持完整颜色。这里是一些示例代码：

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

我的输入元素设置了不透明度，但连边框也变得不透明了。有人可以告诉我如何只在内容中设置不透明度而不影响边框吗？

谢谢。

- Andrés Orozco

---

最简单的方法是将边框赋予包围输入的另一个元素。 - BoltClock

@RohitAzad 非常感谢。我不知道为什么我没有想到这个。这正是我想要的。 - Andrés Orozco

@RohitAzad，你的解决方案对文本没有影响，请检查我的。 - Vladimir Starkov

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

- Vladimir Starkov

Answer 2

我并没有看到这个问题是关于输入元素的，但也许我的答案会对其他人有所帮助，因此我就说一下。

如其他回帖者所说，您可以使用rgba语法来定义您的背景颜色。

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

#element > * {
    opacity:0.8;
}

这是一个例子：JsFiddle 如果您想为元素设置背景图片，我认为最好的方法仍然是使用带边框的容器来包装它。

- TonioElGringo

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

- user3661777

Answer 4

您可以使用background:rgba属性来实现您想要的结果，这将仅影响您的parent而不是child，也适用于parent的border。

CSS

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

演示

- Shailender Arora

---

你忘记给输入框内的文本应用半透明效果了。 - Vladimir Starkov