css - Overlay : semi-transparent border, 非透明内部区域 - howto

Question

我想创建一个矩形覆盖层，其中边框是半透明的，内部区域是不透明的。

如果我调整外部 div(包含边框)的 opacity 参数 - 那么所有内部元素也会变得透明，这是不需要的。

请指教。

Answer 1

如果您不介意使用 CSS3，请试试这个而不是使用不透明度:

border: 2px solid rgba(255, 0, 0, 0.5);

这应该会为您提供 50% 透明的纯红色。查看this intro to rgba如果您需要更多信息。

编辑

如果您没有使用实际边框，请注意 rgba 可以用在 CSS 需要颜色的任何地方，例如 background-color。