Question

您可以在此处使用我的代码： http://jsfiddle.net/gqQnd/

基本上我想要一个div内容来拥有一个半透明的边框。边界是半透明的，但内部div也变得半透明。我希望内部div为白色BG

有人有建议吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #transparency {filter: alpha(opacity=75);opacity:.75; -moz-opacity:.75; background-color:#ccc;border:5px solid #333; position:absolute;top:50px; left:50px;}
        #cont {background-color:#fff;filter: alpha(opacity=100);opacity:1;}
    </style>
</head>
<body>
 This is so cool way to do this
 <br />
 This is so cool way to do this
 <br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this<br />
 This is so cool way to do this
    <div id="transparency">
        <div id="cont">
            <div>
                This is header
            </div>
            <div>This is body</div>
        </div>
    </div>

</body>
</html>

Answer 1

实际上正在应用#cont的样式（因此白色背景，即使它是半透明的）。问题是不透明度是继承的，因此如果将它应用于父元素，则无法阻止它应用于子元素。

你可以使用rgba值作为边框颜色，但是你会在Chrome和Safari（我认为）中出现黑暗角落，边框重叠。阅读它here（有变通方法）。

如何在父级上设置rgba背景，并使用一些填充？

http://jsfiddle.net/Kp7JJ/

更新：有关rgba的跨浏览器支持，请参阅css3please.com，例如：您需要在CSS中应用Microsoft过滤器才能使其在IE中运行

Answer 2

这是一个选项如何执行此操作，但在这种情况下，您的弹出窗口将具有固定大小，我不知道是否可以使其灵活，没有javascript（jQuery）只有css

http://jsfiddle.net/gqQnd/13/

Answer 3

如果不使用rgba背景，我建议您创建一个包含两个div的容器。一个用于不透明度，另一个用于纯色。

缺点是，如果不知道您要创建的div的高度和宽度，就无法使用。

但它适用于所有浏览器：）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
    <title>my super page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style type="text/css">
        body             { background:#EF9; }
        .container       { width:200px;height:140px; }
        .container > div { width:196px; height:136px; position: absolute;}
        .c-opacified     { position:absolute; border:2px solid #000;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);}
        .c-plain         { background:red;margin:2px;/*because we have a border: 2px */}
    </style>
</head>
<body>
    <div class="container">
        <div class="c-opacified"></div>
        <div class="c-plain"></div>
    </div>
</body>
</html>

如何使这个CSS工作有半透明边框？

3 个答案: