首页 > 母婴教育 > 科普教育 >

CSS系列:[1]CSS实现半透明div层的方法-div半透明怎样设置

来源:互联网 2023-10-08 00:03:52 版权归原作者所有,如有侵权,请联系我们

 

具体来说,先看呵呵示例,如下表所示: Rn3办公区 - 实用经验教程分享!

/>#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(../demoimg/3.jpg);}Rn3办公区 - 实用经验教程分享!

#div2 {  height:330px;filter:alpha(Opacity=80);/*全力支持 IE 应用领域程序*/-moz-opacity:0.5;*全力支持 FireFox 应用领域程序*/opacity: 0.5;/*全力支持 Chrome, Opera, Safari 等应用领域程序*/Rn3办公区 - 实用经验教程分享!

z-index:100;background-color:#ffffff;  }Rn3办公区 - 实用经验教程分享!

这儿是透明化的DIV
接着,在须要透明化层div加CSS标识符div{filter:alpha(opacity=50);  /*全力支持 IE 应用领域程序*/-moz-opacity:0.50; /*全力支持

FireFox 应用领域程序*/opacity:0.50;  /*全力支持 Chrome, Opera, Safari 等应用领域程序*/}这种就能同时实现CSS乳白色操作方式01主要就应用领域的标识符有:filter:alpha(Opacity=80);/*全力支持 IE 应用领域程序*/-moz-opacity:0.5;*全力支持 FireFox 应用领域程序*/opacity: 0.5;/*全力支持 Chrome, Opera, Safari 等浏览器*/z-index:100;/*该处为所处楼层,尽量增设大点*/Rn3办公区 - 实用经验教程分享!

02标识符如下表所示:#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(../demoimg/3.jpg);}#div2 {  height:330px;filter:alpha(Opacity=80);/*全力支持 IE 应用领域程序*/-moz-opacity:0.5;*全力支持 FireFox 应用领域程序*/opacity: 0.5;/*全力支持 Chrome, Opera, Safari 等应用领域程序*/z-index:100;background-color:#ffffff;  }Rn3办公区 - 实用经验教程分享!

这儿是透明化的DIV

03上面他们来缔造呵呵标识符现实生活效用吧!Rn3办公区 - 实用经验教程分享!

特殊提醒img背景图片路径不要增设错了要想适配所有的应用领域程序,上面的背景透明化都要写上Rn3办公区 - 实用经验教程分享!

Rn3办公区 - 实用经验教程分享!


标签:

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号