透明效果，可以设置透明值，做背景

来源：互联网发布：丹东淘宝模特兼职招聘编辑：程序博客网时间：2024/05/01 02:26

http://www.corange.cn//uploadfiles/0924_76975.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>通用透明</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{
margin:0 auto;
}
body {
font-size:12px;
font-family:"宋体";
background:#DFEAF4;
text-align:center;
}
a {color:000000; text-decoration:none;}
a:hover {color:993333;}
#top10 {
border:1px solid #336699;
width:300px;
height:202px;
background:#fff;
text-align:left;
opacity:.6; filter:alpha(opacity=60);
}
#top10 ul {
padding:5px;
}
#top10 ul li {
height:15px;
list-style:none;
padding-left:35px;
line-height:18px;
border-bottom:1px solid #fff;
}
.li_01 { background:#AFCAE4 url(jsfile/imagesa35/01.gif) no-repeat; }
.li_02 { background:#BFD5EA url(jsfile/imagesa35/02.gif) no-repeat; }
.li_03 { background:#CFDFEF url(jsfile/imagesa35/03.gif) no-repeat; }
.li_04 { background:#DFEAF4 url(jsfile/imagesa35/04.gif) no-repeat; }
.li_05 { background:#EFF4FA url(jsfile/imagesa35/05.gif) no-repeat; }
.li_06 { background:#EFF4FA url(jsfile/imagesa35/06.gif) no-repeat; }
.li_07 { background:#EFF4FA url(jsfile/imagesa35/07.gif) no-repeat; }
.li_08 { background:#EFF4FA url(jsfile/imagesa35/08.gif) no-repeat; }
.li_09 { background:#EFF4FA url(jsfile/imagesa35/09.gif) no-repeat; }
.li_10 { background:#EFF4FA url(jsfile/imagesa35/10.gif) no-repeat; }
</style>
</HEAD>
<BODY>
<div id="top10">
<ul>
<li class="li_01"><a href="#">WordPress 运行代码插件</a></li>
<li class="li_02"><a href="#">谷歌奥运倒计时366天推出新Logo</a></li>
<li class="li_03"><a href="#">SearchStatus:同时显示Alexa排名和PR值</a></li>
<li class="li_04"><a href="#">关注 CSS Zen Garden 禅意花园</a></li>
<li class="li_05"><a href="#">Google AdSense 推介改版并推出众多新产品</a></li>
<li class="li_06"><a href="#">标准与习惯：在解决ul居中问题时想到的</a></li>
<li class="li_07"><a href="#">玩转 WordPress 附赠插件 Hello Dolly</a></li>
<li class="li_08"><a href="#">Hello Dolly 励志修改版插件提供下载</a></li>
<li class="li_09"><a href="#">说说最近读的书：无懈可击的Web设计</a></li>
<li class="li_10"><a href="#">网络写手的利器：体验 Google 文件</a></li>
</ul>
</div>
</BODY>
</HTML>