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=30); background-color:#000; }

.content{height:600px; width:800px; overflow:auto; border:2px solid #ccc; background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px auto auto -400px; z-index:1001; word-wrap: break-word; padding:3px;}

.ph{ height:1000px;}

place holder height:1000px;

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

这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。下面我们通过一个简单的例子看看如何实现，高手请绕道。

html代码很简单 < d i v class="mask opacity">< / d i v >

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怎么给div加半透明背景色,CSS_div背景半透明覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...相关推荐

【懒加载】监听视图是否到达可视区域
前言功能参考饿了么的图片组件里的懒加载图片(地址) 想要实现在快滚动到底部的时候去动态加载图片,前面写到过的监听滚动条去做懒加载也可以做到,但是想用更优雅的写法来实现,即用本地占位图片来替换网络图片 ...
html button半透明效果,【笔记JS/HTML/CSS】用div实现个性化button，背景半透明
html中的button默认样式..不太能看,如果调一调背景色和字体的话也挺适合简洁的页面设计于是决定配合JS,用html中的div完成button 最终结果图: html代码:(first_pas ...
半透明遮罩层覆盖整个可视区域
我们经常会遇到点击一个按钮弹出一个对话框和一个变暗的遮罩层,简单的写法只能让遮罩层覆盖浏览器的大小,那么怎么让遮罩层覆盖全部区域呢? css代码如下: 1 html,body { 2 height: ...
遮罩层内容半透明解决
div id="nav_img_ios" 是遮罩层,从左上侧 top:0 left:0 的位置 100% 屏幕整个屏幕 divid="qrcontainer" ...
网页背景图片加遮罩层详解
首先加入背景图片别的不说先上代码 <head>  <style>body {background-image: url(" ...
php mysql js弹出登陆小窗口_基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery...
具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html jquery点 ...
背景色及背景图片的覆盖范围
背景色及背景图片覆盖的范围是从border开始到内容区域 <!DOCTYPE html> <html> <head> <meta charset=" ...
php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗
这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...
RGBA颜色与兼容性的半透明背景色
一.周末的唠唠叨叨这周真是辛苦的一周,很多事情不得已都拖着,比如现在这篇文章早前几天前就应该完工了:关于vertical-align属性的下集还没有开始写,jQuery在线参考内容添加还没有做,CS ...
怎么样给下拉框加载背景色
选择自 PPLUNCLE 的 Blog 部分代码: ------aspx页面: <tr> <td><select id="job" name=&q ...

html怎么给div加半透明背景色,CSS_div背景半透明覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...

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

html怎么给div加半透明背景色,CSS_div背景半透明覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...相关推荐

最新文章

热门文章

html怎么给div加半透明背景色,CSS_div背景半透明 覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...

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

html怎么给div加半透明背景色,CSS_div背景半透明 覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...相关推荐

最新文章

热门文章

html怎么给div加半透明背景色,CSS_div背景半透明覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...

html怎么给div加半透明背景色,CSS_div背景半透明覆盖整个可视区域的遮罩层效果，html代码很简单 div class= - phpStudy...相关推荐