300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html背景自动覆盖 div背景半透明 覆盖整个可视区域的遮罩层效果

html背景自动覆盖 div背景半透明 覆盖整个可视区域的遮罩层效果

时间:2018-11-26 15:56:12

相关推荐

html背景自动覆盖 div背景半透明 覆盖整个可视区域的遮罩层效果

html代码很简单

1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码:

.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }

2 、要覆盖整个可视区域通常的做法是:

html,body{ height:100%}

.mask{height:100%;width:100%;}

但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用position:fixed; 来解决这个问题

完整的代码:

html,body{ height:100%; margin:0; padding:0}

.mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }

.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }

一个实际的代码例子:

复制代码代码如下:

背景半透明覆盖整个可视区域

html,body{ height:100%; margin:0; padding:0; font-size:14px;}

p{ line-height:18px;}

.mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }

.opacity{ opacity:0.3; filter: alpha(opacity=

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。