Question

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

Answer 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中添加填充。

Answer 2

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

div background: black不包含具有transparent背景的div。你应该在你的HTML中更改它。此外，当您将background: black;添加到css。{/ p>中的body时，您也可以观看它

用CSS制作一个透明的盒子

2 个答案: