css四可见,部分可见和重叠半透明
2016-05-26 11:28
661 查看
<html> <head> <title>javascript</title> <style type="text/css"> div.window{ position: absolute; width: 300px;height:200px; border: 3px outset gray; } div.titlebar{ position:absolute; top:0px;height:18px; width:290px; background-color:#aaa; border-bottom:groove gray 2px; padding:3px 5px 2px 5px; font:bold 11pt sans-serif; } div.content{ position:absolute; top:25px; height:165px; width:290; padding:5px; overflow:auto; background-color:#fff; } div.translucent{ opacity:.75; filter:alpha(opacity=75); } </style> <head> <body> <div class="window" style="left: 10px;top: 10px; z-index:10;"> <div class="titlebar">Test Window</div> <div>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div> </div> <div class="window" style="left: 75px;top: 110px; z-index:20;"> <div class="titlebar">Anther window</div> <div class="content translucent" style="background-color:#ccc; font-weight:bold;"> this is another window. its <tt>z-index</tt>puts it on top of the other one css styles mke its content area translucent,in browsers that support that </div> </div> <body> </html>
相关文章推荐
- 来看看css3中的box-shadow
- css3之渐变
- Material Design-Button的新式样式初探
- gulp构建指令
- NPOI之Excel——合并单元格、设置样式、输入公式
- NPOI之Excel——合并单元格、设置样式、输入公式
- css 优先级总结
- 详解rotate3()
- css-三边框,外边距和内边距
- 使用CSS3 :nth-child(n) 選取器教學
- css:使用笔记(不断更新中...)
- css二阴影+第三维度z-index
- CSS外边距合并
- css一div内文字居中
- css 小知识
- 20个很有用的CSS技巧
- CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- [ CSS ] filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
- css-去除默认样式
- css word-wrap和word-break强制换行