Question

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

我只发现了以下情况：

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

有人能指出我正确的方向，还是另类解决方案？

Answer 1

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

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

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

非常好supported与IE（= 8）的（多么令人惊讶的）例外。

以下是您的示例：transparent border with solid bg。

为了完整起见：必要的背景剪辑具有相同的浏览器支持，但这里是browser support table

编辑：

要获得对IE6 +的支持，您应该查看CSS3Pie。它通过VML模拟CSS3属性，如圆角或其他颜色空间。

Answer 2

根据您需要支持的浏览器的年龄，background-clip可能是一个很好的解决方案。

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

希望有所帮助：）

Answer 3

嘿，现在你可以习惯{strong>背景颜色中的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/

Answer 4

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

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

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

CSS DIV与交叉浏览器不透明边框与纯色背景

4 个答案: