2

我正在尝试在容器的背景上制作一个透明框，但是，我无法在背景中间制作它，相反，当我尝试使用上边距来实现我的设计时，它会移动背景图像也下来了，所以我想问一下为什么我不能像 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;
}
4

2 回答 2

8

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

不透明度：

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-12T09:19:06.877 回答
3

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

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

于 2012-07-12T09:17:52.567 回答