当前位置:清晨 » 站长笔记 » div css 实现边框透明内容不透明的解决方法

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

发布日期:2012年9月22日 03:09:00 点击量: 1,055

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

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.info/288/,转载请以链接形式注明出处,谢谢合作!


老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725


评论已关闭。