您的位置：首页 > 其它

【技术贴】手把手教你做背景半透明的div效果

2012-05-18 22:38 288 查看

今天晚上无聊，去了趟腾讯朋友网，发现了一个很好看的效果，以为是flash做的，结果发现div也是可以做到的，于是就仿造了一个。

核心代码很简单，就两行。------------------------------------------------------------------------------------ background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=40);background:#000000;/*实现IE背景透明*/------------------------------------------------------------------------------------剩下的就是调整div位置和div字体了，自己看着我的代码慢慢做吧。很简单。

代码下载地址：http://115.com/file/dpjx5qn8

代码

<!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=utf-8" />
<title>背景半透明效果div源码</title>
<style type="text/css">
* {
margin:0 auto;
}
body {
background-image:url(1280_800_2997.jpg);
}
.div {
position:absolute;
right:300px;
background:rgba(0, 0, 0, 0.4) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=40);
background:#000000;/*实现IE背景透明*/
color:#FFF;
padding-top:50px;
width:300px;
height:200px;
margin-top:120px;
}
.div p {
position:relative;
text-align:center;
}
.div2 {
width:300px;
height:200px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
filter:Alpha(opacity=40);
background:#000000;/*实现IE背景透明*/
border-radius: 2px 2px 2px 2px;
padding: 1px;
border:1px dotted red;
display:none;/* 把此行删了，就能好看到测试div*/
}
.hd {
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
padding: 0 0 15px 20px;
position: relative;
}
</style>
</head>

<body>
<div class="div">
<p> <img src="123123.gif" />振宇出品</p>
</div>
<div class="div2">
<div class="hd"> 故意隐藏的测试div。。 </div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航