Div+Css完成屏蔽实际效果

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

【实际效果图】

 

总而言之,便是当某1恶性事件被开启时,比如 按钮点一下恶性事件 。使1个事前界定好的div 显示信息, 并用Css操纵部位,在其中的z-index特性务必有,

值赋的越大,表明此div层在重合时,在最上面。

在其中要留意的地区:

【遮罩层的尺寸】
1、用JS分辨你的显示信息器辨别率,获得长与宽两个主要参数,将这两个主要参数赋给第2层的Div,做为他的长与宽的像素值,这样的话,不管在多大或多小的显示信息器上,都可以以显示信息一样的实际效果

2、CSS款式表:这类方式,只能提早设定好遮罩层的长与宽了,可是就会出現1些难题:假如你的遮罩层设定的宽度、长度很大,那末在小显示信息器上就会出現访问器的翻转条~~反之则会出現遮罩不上的难题


由于做HTML实体模型,因此我用的第2种方式,有个不太有效处理的方法:我把访问器的正下方(横向的)翻转条给禁用掉了。编码是: 在CSS款式表格中写入
html,body { overflow-x:hidden;}

【遮罩层款式】
1、3个Div层的款式,position都要设为absolute;,由于仅有设为absolute时, z-index:特性才会起效!

2、半全透明特性:filter:alpha(opacity=50); IE特有特性, 设定层的全透明度为 50% ,
                            -moz-opacity:0.5;    火狐FF 特有特性,设定层的全透明度为 50%。
这两条特性都要再加,由于IE、火狐对在其中的单11条其实不适配~~~
也有1点,你的遮罩层款式中,1定要设定 width 与 height   ,不然 全透明特性不见效~~


3、 z-index: 的次序,   z-index:特性的值越小,则该层越在正下方,最少值是1

【编码示例】

1 遮盖div

拷贝编码
编码以下:

#apDiv8 {}{
position:absolute;
left:57px;
top:30px;
width:668px;
height:240px;
z-index:1000;
background-color:#CCCCCC;
filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40);
}

2 恶性事件启用

拷贝编码
编码以下:

function divH(){
document.getElementById('apDiv8').style.display='block';
}
<div id ="apDiv8" style="display:none;" >
<input type="button" id="btnadd" style="height: 30px; width: 100px;" onClick="divH()" value="Div遮盖" />

上一篇:css ul li 的应用及访问器适配难题 返回下一篇:没有了