用CSS制作一个透明盒子

我想在容器的背景上制作一个透明盒子，但是，我不能在背景中间做它，而是当我尝试使用顶级盒子时，缘来实现我的设计，它会移动的背景图像倒也，所以我想问一下，为什么我不能让它像由W3C给出的例子中http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency 用CSS制作一个透明盒子

<!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; 
}

来源

2012-07-12 Conrad

相关http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on – 2014-03-02 14:09:45

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

不透明度：

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的。

来源

2012-07-12 09:19:06 SpaceBeers

我明白所有这些方法可以实现一个透明的盒子，实际上，我可以使盒子，但我的问题是相反的位置问题，目前，我的透明盒将保持与容器的背景图像保持联系，这看起来不太好看，我试图在功能div前添加一个虚拟分区，并将buttom边缘设置为有些价值，但仍然不起作用，所以我想问一下，我不能让它成为W3C之一的例子，透明盒位于中心位置。 – Conrad 2012-07-12 09:34:47

好吧，所以你希望＃功能div不会触及#container的顶部？是对的吗？ http://jsfiddle.net/spacebeers/jNATf/ – SpaceBeers 2012-07-12 09:38:04

雅，这正是我想要做的，这个网站看起来挺方便的，所以即使我不能上传屏幕截图，只要发布代码，我可以让其他人了解问题 – Conrad 2012-07-12 09:52:26

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

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

来源

2012-07-12 09:17:52

你是在谈论头div？实际上，在我的设计中，我希望将我的页面分为三部分：页眉，容器和页脚，每个页面都有5px的边距。而在容器div中，我希望它的中间有一个透明框来显示内容，比如一些表格，一个段落。但是我遇到的问题是当我尝试通过设置函数div的边距值来定位它时，它也将背景向下推，但是如果我不添加顶部和底部的边距，它会触摸顶部背景图像，看起来不太好。 – Conrad 2012-07-12 09:29:41

当您添加“边距”元素时，不会在其上显示背景。如果你使用填充，它会。所以，如果你有正常的定位问题，你也可以尝试绝对定位。但我不推荐它。对于正常的定位，你可以在css中使用'margin：5px auto'，从顶部和底部到左右中心都有5px的空间。 – 2012-07-12 09:39:47

好的，谢谢，让我试着让它第一 – Conrad 2012-07-12 09:42:02

用CSS制作一个透明盒子

回答

相关问题