志在指尖
用双手敲打未来

div半透明如何设置(div半透明遮罩效果)

div半透明如何设置

我们在写css样式时,div半透明效果如何实现呢?使用css实现div成半透明效果,css实现层与背景半透明效果。
解决方法:
我们还是直接上代码吧。
一、CSS半透明基础介绍
设置DIV半透明CSS代码:
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;}
说明:
1、filter:对windowsIE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,但是火狐浏览器不认。
2、-moz-opacity:对mozillafirefox火狐浏览器实现半透明,windowsIE不认此属性,-moz-opacity:0.5相当于设置半透明为50%。
3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity:0.5;表示设置50%半透明
为了观察到对DIV半透明实现,我们设置两个DIV,分别一个放于另外一个DIV内,外层DIV命名为“.First”,上面被包含的层命名为“.Second”,形成“.Second”盒子放于“.First”内。
我们对底层DIV设置一个背景是一张图片,上面的DIV盒子设置成黑色。
二、未设置半透明样式实例
1、根据描述实例,未设置半透明HTML源代码:
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”utf-8″/>
<title>半透明实例</title>
<style>
.First{background:url(‘../images/First.jpg’)no-repeat;width:230px;height:136px;padding:10px;}
.Second{background:#000;width:200px;height:100px;padding:5px;color:#F00}
</style>
</head>
<body>
<divclass=”First”>
<divclass=”Second”>测试测试测试</div>
</div>
</body>
</html>

div半透明遮罩效果

<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=gb2312″/>
<title>半透明div</title>
<style>
#div1{margin:0pxauto;width:500px;height:370px;text-align:center;background:url(‘http://www.codefans.net/jscss/demoimg/wall3.jpg’);}
#div2{height:330px;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;z-index:100;background-color:#ffffff;}
</style>
</head>
<body>
<divid=”div1″>
<divstyle=”padding:20px;”>
<divid=”div2″>这里是透明的DIV</div>
</div>
</div>
</body>

未经允许不得转载:IT技术网站 » div半透明如何设置(div半透明遮罩效果)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载