 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| CSS 半透明层的实现 |
| 来源：源码爱好者 更新时间：2011/4/4 2:58:30 阅读次数： 我要投稿 |
|
<!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>
<title>Translucency</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
#container {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
background: url(/effects/UploadFiles_7074/201104/2011040402594779.jpg) no-repeat;
}
#container .textblock {
filter: alpha(opacity=60);
opacity: 0.6;
margin-top: 50px;
margin-left: 50px;
width: 280px;
background: #ffffff;
border: 1px solid #007101;
padding: 0.5em;
font: 80%/1.6 Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="container">
<div class="textblock">
<p>360安全卫士，你声称让电脑跑的最快，可你现在是不是太霸道了？打开什么你都要蹦个提示框，关掉你还要浪费我时间，你烦人不？？少了你电脑就不运行了？</p>
<p>国人就这点素质 ，新闻早说了中国不会受核辐射，而且吃碘也对抗辐射起不到什么作用？日本人还没抢盐，国人的忧患意识实在让人佩服！</p>
</div>
</div>
</body>
</html> |
| 特效说明： |
| CSS半透明层的实现，让您掌握filter中alpha的用法，在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为是不是100%透明，因此可以看到下层的图片，形成立体效果。 |
|
| 上一篇文章： Hongru-Box 自定义的Js弹出层插件下一篇文章： CSS 仿Excel表格功能 |
|
|
|
注册 登录
