用 CSS 制作透明盒子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11448498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a transparent box with CSS
提问by Conrad
I am trying to make an transparent box on the background of container, however, I am not able to make it in the middle of the background, instead, when I am trying to use the top-margin to achieve my design, it will move the background image down also, so I would like to ask why I cannot make it like the example given by W3C in http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency
我正在尝试在容器的背景上制作一个透明框，但是，我无法将其制作在背景中间，相反，当我尝试使用上边距来实现我的设计时，它会移动背景图片也下来了，所以我想问一下为什么我不能像 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>
Here is the CSS file:
这是 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;
}
回答by SpaceBeers
There's a couple of ways of doing this. You can use:
有几种方法可以做到这一点。您可以使用：
opacity:
不透明度：
style {
opacity: 0.5;
filter: alpha(opacity=50); // For IE
-moz-opacity:0.5; // For Firefox < 5.0
}
RGBA colours:
RGBA 颜色：
style {
background: rgba(0, 0, 0, 0.5); // The last item is the opacity
}
An image:
一个图像：
style {
background: url('image/transparent_img.png') repeat top left;
}
RGBA is the nicest method but unsupported in older IE versions.Opacity isn't that well supported (IE again either). You can use an rga() as fallback but personally for now I think a transparent image is your best x-browser bet.
RGBA 是最好的方法，但在较旧的 IE 版本中不受支持。Opacity 没有得到很好的支持（同样是 IE）。您可以使用 rga() 作为后备，但就我个人而言，我认为透明图像是您最好的 x 浏览器赌注。
EDIT:Seeing as I misunderstood the question, you want to just add padding to the #container.
编辑：看到我误解了这个问题，您只想向#container 添加填充。
回答by Mateusz Rogulski
It work correctly but your positioning is wrong.
它工作正常，但你的定位是错误的。
div with background: blacknot contain your div with transparentbackground. You should change it in your html. Also you can watch it work when you add background: black;to your bodyin css.
divbackground: black不包含您的 div 与transparent背景。你应该在你的html中改变它。当您添加background: black;到您body的 css 中时，您也可以观看它的工作。
