gpt4 book ai didi

css - 用CSS制作一个透明盒子

转载 作者:行者123 更新时间:2023-12-02 06:05:22 24 4
gpt4 key购买 nike

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

最佳答案

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

不透明度:

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 版本中不受支持。Opacity 也没有得到很好的支持(同样是 IE)。您可以使用 rga() 作为后备,但就我个人而言,我认为透明图像是您最好的 x 浏览器选择。

编辑:鉴于我误解了这个问题,您只想向#container 添加填充。

关于css - 用CSS制作一个透明盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11448498/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com