当前位置:首页 > 站长笔记 > 正文
运行天数:2910 天 最后更新:2020-4-10

div css 实现边框透明内容不透明的解决方法

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2012年09月22日 | 作者: 影子 | 分类: 站长笔记 | 点击量: 1,347

div css 实现边框透明内容不透明的解决方法,效果如下:兼容IE6/7/8/FF

div css 实现边框透明内容不透明的解决方法

 

代码如下:———————————————————————————–

<!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>布丁足迹ddhbb.com-弹出层边框透明</title>
<style type=”text/css”>
body{background:url(
http://www.ddhbb.com/logo.gif
); padding:50px;}

/*home*/
.alphaContainer{border:solid 1px #333; width:440px; height:336px;position:relative;overflow:hidden;padding:10px;}
.alphaContainer:after {content:”.”;display:block;height:0;clear:both;visibility:hidden;}
b.alphaBg{opacity:0.4;background:#000;height:2000px;position:absolute;left:0;top:0;width:460px;z-index:1;text-indent:-999em;}
.content{position:relative;z-index:2;background:#fff;width:440px;float:left; background:#0033CC;}
.content h1{height:26px; padding:0 0 0 6px; font-size:14px; font-weight:bold; color:#FFFFFF;background:#5cb535; overflow:hidden;margin:0;}
.content h1 span{ float:left; padding-top:6px;}
.content h1 .close{ float:right; display:block;width:16px; height:16px;background:url(close.gif) no-repeat; margin:5px 6px 0 0;}
.content_info{ width:380px; height:262px; padding:24px 30px; background:#fff; overflow:hidden;}
.content_info p{ font-size:12px;margin:0;}
.content_info .content_info_down{ padding:10px 0; font-size:12px;}
.content_info .content_info_down select{ width:169px; height:20px; border:1px solid #999999; font-size:12px;}
.content_info_txt{ font-size:12px;}
.content_info_txt span{ float:left;}
.content_info_txt textarea{ width:330px; height:170px;}
.content_info_bt{ padding:16px 0 0 36px;}
.content_info_bt input{ width:50px; height:22px; padding-top:2px; border:1px solid #008733; background:#61b73a; color:#FFFFFF;}
/*end*/

<!–[if IE]><style type=”text/css”>.alphaContainer{zoom:1;}b.alphaBg{filter:alpha(opacity=40);zoom:1;}</style><![endif]–>
<!–[if IE 6]><style type=”text/css”>b.alphaBg{padding-right:20px; margin-bottom:-10px;}/*注意:如果.alphaContainer{padding:10px;}那么这里padding-right:20px;*/</style><![endif]–>

</style>
</head>
<body>
<!–alphaContainer_home–>
<div class=”alphaContainer”>
<b class=”alphaBg”>这个层用来显示背景</b>
<div class=”content”>
<h1><span>我要纠错</span><a href=”
http://www.ddhbb.com/” target=”_blank” title=”关闭” class=”close”></a></h1>
<div class=”content_info”>
<p>请选择要纠错的模块,并填写具体描述,提交之后我们会第一时间处理。</p>
<div class=”content_info_down”>类型:<select>
<option>食材正文图片</option>
</select></div>
<div class=”content_info_txt”><span>内容:</span><textarea name=”” cols=”” rows=””></textarea></div>
<div class=”content_info_bt”><input name=”” type=”submit” value=”提交” /> <input name=”” type=”submit” value=”取消” />
</div>
</div>
</div>
</div>
<!–alphaContainer_end–>
</body>
</html>

转载:http://www.ddhbb.com/post/768.html


关键词:

本文网址:https://www.menglei.net/288/,转载请以链接形式注明出处,谢谢合作!

作者:清晨@网站建设专家. | 清晨,领先的网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com