用 CSS 制作一个透明的盒子答案

【问题标题】：Making a transparent box with CSS用 CSS 制作一个透明的盒子
【发布时间】：2015-12-08 16:17:28
【问题描述】：

我正在尝试在容器的背景上制作一个透明框，但是，我无法在背景中间制作它，相反，当我尝试使用上边距来实现我的设计时，它也会将背景图像向下移动，所以我想问一下为什么我不能像 W3C 在http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency 中给出的例子一样@

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
    <title>
        Portal
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
    <div id="header">
        <img src="images/logo.gif" id="logo" alt="Logo"/>
        <a href="http://www.google.com">
            <img src="images/a.png" id="logo2" align="right" alt="logo"/>
        </a>
    </div> 
    <div id="container">
        <div id="function"></div>
        <div id="Display"></div>
        <div id="View"></div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

这是 CSS 文件：

body{
font-size:100%;
margin: 0em 9em 0em 9em;
}

#header{
width:55em;
height:2.375em;
background:black;
border: 0em 0em 0em 0em;
}

#logo{
padding: 0em 0em 0em 2em;
}

#logo2{
width:3.618em;
height:2.3em;
margin: 0.1em 0.25em 0.1em 0em;
}

#container{
width:55em;
height: 36.25em;
background-image:url("images/background1.jpg");
margin: 0.25em 0em 0em 0em;
}

#function{
width:35em;
height:32.625em;
margin: 2em 10em;
background-color: #ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}

#footer{
font-family:"Times New Roman";
width:62em;
font-size:0.75em;
color:grey;
border-top-style:solid;
border-color:grey;
border-width:0.25em;
margin: 0.25em 0em 0em 5em;
}

【问题讨论】：

相关stackoverflow.com/questions/806000/…

标签： css opacity

【解决方案1】：

有几种方法可以做到这一点。您可以使用：

不透明度：

style {
    opacity: 0.5;
    filter: alpha(opacity=50); // For IE
    -moz-opacity:0.5; // For Firefox < 5.0
}

RGBA 颜色：

style {
    background: rgba(0, 0, 0, 0.5); // The last item is the opacity
}

一张图片：

style {
    background: url('image/transparent_img.png') repeat top left;
}

RGBA 是最好的方法，但在较旧的 IE 版本中不受支持。不透明度没有得到很好的支持（IE 也同样如此）。您可以使用 rga() 作为后备，但就个人而言，我认为透明图像是您最好的 x 浏览器选择。

编辑：看到我误解了这个问题，您只想向#container 添加填充。

【讨论】：

我了解所有这些方法都可以实现制作透明盒子，实际上，我可以制作盒子，但我的问题是位置问题，目前，我的透明盒子会与背景保持联系容器的图像，不是很好看，我尝试在函数 div 之前添加一个虚拟除法并将底部边距设置为某个值，但仍然不起作用，所以我想问一下我的原因是什么不能让它像 W3C 中的示例那样，透明框位于中心。
好的，所以您希望#function div 不触及#container 的顶部？那正确吗？ jsfiddle.net/spacebeers/jNATf
呀，这正是我想做的，这个网站看起来很方便，所以即使我不能上传屏幕截图，只需发布代码，我可以让其他人了解问题跨度>
好的，我已经编辑了答案。您只想在#container 的顶部添加填充
哦，太好了，终于可以了.

【解决方案2】：

它工作正常，但你的定位是错误的。

带有background: black 的div 不包含带有transparent 背景的div。你应该在你的html中改变它。当您在 css 中将 background: black; 添加到您的 body 时，您也可以观看它的工作。

【讨论】：

你说的是标题 div 吗？实际上，在我的设计中，我想让我的页面分为三个部分：页眉、容器和页脚，每个部分都以 5px 的边距分隔。而在容器div中，我希望它中间有一个透明的框来展示内容，比如一些表格，一个段落。但是我遇到的问题是当我尝试通过设置函数div的边距值将它定位在中间时，它也会将背景向下推，但是如果我不添加顶部和底部的边距，它会触及顶部背景图片，不太好看。
当您将margin 添加到元素时，它不会在其上显示背景。如果你在那里使用填充，它会。因此，如果您在正常定位方面遇到问题，您也可以尝试绝对定位。但我不推荐它。对于正常定位，您可以在 css 中使用 margin: 5px auto 以从顶部和底部以及左右中间留出 5px 的空间。