css四可见,部分可见和重叠半透明

最新推荐文章于 2021-09-11 10:18:37 发布

weixin_30737363

最新推荐文章于 2021-09-11 10:18:37 发布

阅读量428

点赞数

原文链接：http://www.cnblogs.com/tingbogiu/p/5530400.html

版权

<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>