CSS实现Div层背景半透明而内容不透明的效果

2014年5月18日 MK CSS 5 阅读 45914次

前几天有一个学弟问我，怎么样能实现Div层背景半透明而内容不透明的效果呢，他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下，用浮动层可以做到啊，下面是代码：

透明





背景半透明但文字不透明

代码预览

<title>透明</title>
<head>
<style>
body{
background: #40ed90;
}
#container {
    color: #154BA0;
    background: #ff0000;
    filter: Alpha(Opacity=10, Style=0);
    opacity: 0.10;
    position: absolute;
    height: 200px;
    width:500px;
    z-index:20;
}
#text {
    position: absolute;
    height: 200px;
    width:500px;
    text-align:center;
    z-index:30;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>

css, 半透明, 层, 效果

DIV块级元素与内嵌元素之间嵌套规则详解 IE6下背景图片不透明BUG的解决方案

相关文章

5 条评论 “CSS实现Div层背景半透明而内容不透明的效果”

多么多余的做法说道：

2017年1月3日上午10:53

外层直接用background:rgba(255,255,255,.1)

回复
yxz说道：

2015年9月2日上午10:35

有没有更高级的，如何在透明div里input上面实现文字图片不透明，做个登录栏这么难…………….

回复
- MK说道：
  
  2015年9月9日上午12:08
  
  直接用定位啊。
  
  回复
yxz说道：

2015年9月2日上午10:31

神马

回复
yxz说道：

2015年9月2日上午10:30

回复

发表回复取消回复