管理
|
|
偶乐在哪儿看到一个边框透明的效果感觉很漂亮,觉得挺简单的,回家就自己做,可一坐真不好弄,首先想到的是用一个层,嵌套一个层，外面的层整成半透明,就可以了，
搞半透明的css:filter: Alpha(Opacity=50); opacity: 0.50;
谁想层具有继承性，整了半天，整了这个效果
这可不行，我想要的是里面的内容是不透明的！于是呼就从网上搜让层不具继承
结果搜到了
position:relative;/* 子层*／
position:static／* 父层*/
这样确实可以不继承了，但新问题又来了，把父层的position设为static是不可以拖动的，只有设为absolute时才可以拖动，没办法，本人想了个笨方法，用一个三行三列的表格，把除了中间的<TD>都设为半透明，然后把层的主题部分放到中间的单无格中，哈哈，方法虽然笨，目的达到了！
现把代码附上，希望对想做类似效果的同学有点帮助！也希望有Div+Css高手来指导一下用Div怎么做！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
Div.Dialog {
font-size: 13px;
position:absolute;
width:300px;
left: 116px;
top: 80px;
}
Div.Title {
font-size: 13px;
background-color: #972600;
width: 100%;
color: #FFFFFF; /*position:relative;*/
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
text-indent: 12px;
}
.Op
{
background-color: #000000;
filter: Alpha(Opacity=50);
opacity: 0.50;
width: 8px;
height: 8px;
}
Div.Body {
font-size: 13px;
background-color: #FFFFFF;
width: 100%;
padding: 3px;
color: #FFFFFF;
height: 200px; /*position:relative;*/
}
body {
background-image: url(title_right.jpg);
}
</style>
</head>
<!--position:relative;必须的，和父层的position:static对应-->
<body>
<Div class="Dialog">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="Op"></td>
<td class="Op"></td>
<td class="Op"></td>
</tr>
<tr>
<td class="Op"></td>
<td><Div class="Title">dddd</Div>
<Div class="Body">dddd</Div></td>
<td class="Op"></td>
</tr>
<tr>
<td class="Op"></td>
<td class="Op"></td>
<td class="Op"></td>
</tr>
</table>
</Div>
</body>
</html>