元素不透明度，但不包含边框 [英] Element opacity but not border

问题描述

嗯，我有这个问题，我看到有人已经问过类似的问题，但是我还不明白.

Well, I have this question and I see that someone already asked something similar but this I don't understand yet.

我想要做的是将元素的不透明度设置为0.7，但仅将内容而不是边框​​设置为0.7，我希望边框保持全彩.一些示例代码在这里:

What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay full color. Some example code here:

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

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

The result is that my input element has the opacity but even the border, Can someone tell me how to set the opacity just in the content but not the border?

谢谢.

推荐答案

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

Use rgba syntax both for color and background and not use opacity for whole element

演示涉水

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

这篇关于元素不透明度，但不包含边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！