0

是否可以在div上实现具有纯色背景的跨浏览器（ie6+）半透明边框？

我只发现了以下情况：

  • 边框是半透明的，但背景也是半透明的。
  • 身体是半透明的，但边框不是。

谁能指出我正确的方向或替代解决方案？

4

4 回答 4

4

这取决于您想要/必须支持的浏览器，但您可以使用 CSS3-rgba 声明来定义颜色（标准 rgb 和附加a- 这是 alpha/透明通道）。此外，根据背景和边框的颜色，您可能需要添加background-clip属性。

rgba(255,255,255,.5);
background-clip:padding-box;

会给你一个 50% 不透明的白色。这适用于您可以指定颜色的每个属性。

IE<=8 的例外（多么令人惊讶）得到了很好的支持。

这是一个给你的例子：带实心 bg 的透明边框。

为了完整起见：必要的背景剪辑具有相同的浏览器支持，但这里有一个浏览器支持表

编辑：

对于 IE6+ 的支持，你应该看看CSS3Pie。它通过 VML 模拟圆角或其他颜色空间等 CSS3 属性。

于 2012-06-25T11:41:31.567 回答
0

我设法在 MSIE6 中完成了这项工作：具有不透明背景的半透明边框： 

.qm { 
    background-attachment: fixed;
    background-color: transparent;
    background-image: url("trans_paars70.png");
    padding: 1em;
}

基本上，我使用元素的填充来创建一个假边框，填充半透明背景图像（只要您提供 256 色调色板 gif 或 png，这在 MSIE6 中就可以正常工作）。

于 2012-08-14T22:20:02.087 回答
0

根据您需要支持的浏览器的年龄，背景剪辑可能是一个很好的解决方案。

您想使用padding-box然后将背景颜色和边框颜色设置为您需要的任何颜色，rgba(0,0,0,0)用于任何半透明值，第四个值是 alpha。

希望有帮助:)

于 2012-06-25T11:43:23.513 回答
0

rgba properties嘿，现在您可以像这样习惯于背景颜色和边框实心

CSS

.parent{
    background: rgba(0,0,0,0.2);
    padding: 50px;
}

.box {
    background: #f0edcc;
    border: 24px solid rgba(0,0,0,0.3);
    padding: 10px;
    margin: 20px;
}

HTML

<div class="parent">
    <div class="box">Your message.</div>
</div>

现场演示http://jsfiddle.net/gf5Fd/1/

于 2012-06-25T11:51:00.377 回答