底层透明 面层不透明，这里的CSS哪里出问题了？
.content{margin:0auto;width:1002px;height:100%;top:50px;bottom:0px;background-color:#...
.content { margin: 0 auto; width: 1002px; height:100%; top: 50px; bottom:0px; background-color: #333333; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.6; }
.main_content {margin:10px 0 0 3px; float:left; width:700px;border:1px solid red;}
.post_form {box-shadow: 0 0 2px rgba(255,255,255,1);
border-radius: 2px;
padding: 15px 10px 10px;
height: 140px;
overflow: hidden;
display:block;
background-color: #fff;}
这里的content是最底层，main_content嵌套在content里，post_form在main_content里。想做到效果是content半透明，而post_form不透明，该如何修改呢？请指教。效果类似现在新版的新浪微博一样。 展开
.main_content {margin:10px 0 0 3px; float:left; width:700px;border:1px solid red;}
.post_form {box-shadow: 0 0 2px rgba(255,255,255,1);
border-radius: 2px;
padding: 15px 10px 10px;
height: 140px;
overflow: hidden;
display:block;
background-color: #fff;}
这里的content是最底层，main_content嵌套在content里，post_form在main_content里。想做到效果是content半透明，而post_form不透明，该如何修改呢？请指教。效果类似现在新版的新浪微博一样。 展开
3个回答
展开全部
只要，.content 设置半透明，嵌套在它里面的子容器都会半透明。修改的话，在.content外面套一个div 比如设置这个div的class 值为 .container，给他设置position属性为relative，然后将.main_content 作为.content 的同级元素，分别设置它们的position属性，一个是relative，另一个是absolute，总之，看起来让.main_content 在.content上面，这样.content 的半透明不会影响.main_content 。
以我的理解，写了一个例子，你看一下是不是你想要的。。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
position: relative;
margin: 0 auto;
width: 1002px;
height:100%;
top: 50px;
bottom:0px;
}
.content {
position: relative;
margin:10px 0 0 3px;
float:left;
width:700px;
height: 200px;
border:1px solid red;
background-color: #fff;
filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.6;
}
.main_content {
position: absolute;
margin:10px 0 0 3px;
width:700px;
height: 200px;
border:1px solid red;
background: transparent;
}
.post_form {box-shadow: 0 0 2px rgba(255,255,255,1);
border-radius: 2px;
padding: 15px 10px 10px;
height: 140px;
overflow: hidden;
display:block;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
<div class="main_content">
<div class="post_form">字很清晰吧。。</div>
</div>
</div>
</body>
</html>
以我的理解，写了一个例子，你看一下是不是你想要的。。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
position: relative;
margin: 0 auto;
width: 1002px;
height:100%;
top: 50px;
bottom:0px;
}
.content {
position: relative;
margin:10px 0 0 3px;
float:left;
width:700px;
height: 200px;
border:1px solid red;
background-color: #fff;
filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.6;
}
.main_content {
position: absolute;
margin:10px 0 0 3px;
width:700px;
height: 200px;
border:1px solid red;
background: transparent;
}
.post_form {box-shadow: 0 0 2px rgba(255,255,255,1);
border-radius: 2px;
padding: 15px 10px 10px;
height: 140px;
overflow: hidden;
display:block;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
<div class="main_content">
<div class="post_form">字很清晰吧。。</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
新建一个和post_form平级的标签用来放透明背景，content设成相对定位，把post_form和透明背景的标签定到相应的为止，因为如果外层标签设成透明的话它里面的所有元素都会是透明的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用opacity 这个是子元素也会透明的。有两个方案。要么不要用opacity。用rgba颜色、要么不要让这两个div嵌套。外面再套个div，用定位让他们叠在一起
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
