如何从不透明度更改中排除边框答案

【问题标题】：How to exclude border from opacity change如何从不透明度更改中排除边框
【发布时间】：2012-03-04 00:44:57
【问题描述】：

我有这个 CSS：

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

但是边框的不透明度也设置为 0.3，但我不希望边框具有不透明度如何排除此元素？

【问题讨论】：

你不能。您可能需要删除此元素的边框，将此元素包装在另一个元素中并在包装器上设置完全不透明的边框。

标签： html css transparency

【解决方案1】：

你不能。 opacity 设置整个元素的不透明度。根据元素的实际内容，您有两种选择：

将整个内容包装在 <div> 中，并为其应用边框。
如果只有文本和/或背景，请使用rgba 指定文本颜色和/或背景颜色/渐变，而不是opacity。

【讨论】：

除非您希望块中的所有内容都应用不透明度（即图像），否则使用 RGBA 有效。为此，您需要使用容器方法。
rgba兼容IE浏览器吗？
@Lukus：IE9 及更高版本，是的。对于 IE8 及更早版本，没有。你需要一个后备或图像。
@minitech 有后备功能我可以不透明吗？如果不是，我怎样才能使 png 图像作为后备？
@Lukus：你可以使用通常的filter: alpha(opacity=something); 并且只使用半透明的边框，或者如果让它在每个浏览器上看起来完全相同至关重要，你可以使用包装器。跨度>

【解决方案2】：

将 HTML 结构更改为：

<div id="name">
    <div>
       Stuff
    </div>
<div>

CSS 到：

#name { 
    border: 1px solid #fff;
}

#name div { 
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

【讨论】：

【解决方案3】：

你可以添加一个带边框的容器和不透明的内容：

<div id="container" style="border:1px solid #fff">
  <div id="name">
   --------
   </div>
</div>

【讨论】：

不鼓励使用内联样式指令，除非您有非常特殊的原因。
@fastreload 只是为了举例。每个人都编写他们认为适合的“生产代码”:)
我理解，但是考虑到 OP 对 stackoverflow 来说是新的，并且对 CSS 来说可能是新的；保持编码约定通常更有帮助。

【解决方案4】：

您可以创建一个容器。

#name {
    border: 1px solid #fff;
    color: #a5a5a5;
    font-size: 11px;
    font-family: times new roman;
}

.op3 {
    opacity: 0.3;
}

<div id="name">
    <div class="op3">
       <!-- content -->
    </div>
</div>

【讨论】：

【解决方案5】：

试试这个

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
    height: 50px;
}

#name:after {
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 1);
    content: '';
    display: block;
}

【讨论】：