CSS实现Div层背景半透明而内容不透明的效果
前几天有一个学弟问我,怎么样能实现Div层背景半透明而内容不透明的效果呢,他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下,用浮动层可以做到啊,下面是代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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> |
代码预览
DIV块级元素与内嵌元素之间嵌套规则详解 IE6下背景图片不透明BUG的解决方案
外层直接用background:rgba(255,255,255,.1)
有没有更高级的,如何在透明div里input上面实现文字图片不透明,做个登录栏这么难…………….
直接用定位啊。