您的当前位置:首页正文

CSS的在安卓手机上做遮罩层的问题_html/css

2023-11-27 来源:气吉美食网
我的大体框架 是一个 主的DIV,宽高100%,位置fixed,z-index:很大很大 然后一个显示的div,垂直居中.位置fixed。 但是这个能用了,在PC的浏览器看到是正常的,被遮罩的元素不能被点击,也不能被滚动... 但是放到手机里面,虽然被遮罩的元素不能被点击了, 为什么还是能被滚动的,意思就是页面太长的时候,还是可以滑动到下面去的。但是我看easyui的对话框是不能滑动的 这个怎么处理啊
 loadingshow: function (msg) { if (!msg) { msg = "加载中..."; } var jContext = $('body'); var jLoad = $("#appLoading"); var msgDIV = new Array(); msgDIV.push(''); msgDIV.push("" + msg + ""); msgDIV.push(''); jLoad = $(msgDIV.join('')).appendTo(jContext); var left = jContext.width() / 2 - jLoad.find('#sInfo').width() / 2 - 20; var top = jContext.height() / 2 - jLoad.find('#sInfo').height() / 2; jLoad.find("#lContext").css({ position: 'fixed', top: top, left: left, color: 'white', padding: '10px', margin: '10px'}); $("#appLoading").show();//有问题请删除 },

回复讨论(解决方案)

遮罩层像素请用百分比

遮罩层像素请用百分比

我上面的是百分比啊

弹出遮罩层时,限制主体高度至不会出现滚动条,如果没有透明效果的话甚至可以将主体隐藏

取消 touchmove 事件

小编还为您整理了以下内容,可能对您也有帮助:

我在做移动端时遇见的css问题

关于css常见问题,大多是移动端的。

简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。

条目编号后面紧跟英文字母的,要空一格,比如 4. css,“4.”和“css”之间有一个空格。

一、在做手机轮播图时,banner图的宽度是手机屏幕的宽度,轮播图加了左右切换按钮,按钮的position:absolute;定位的元素,定位的元素超出父容器时(超出了100%),会出现滚动条。

二、在移动端有3种布局可选。

1.定位布局

说明:头部、尾部是fixed定位。中间内容部分绝对定位,overflow-y:auto;

2. flex布局(朕极力推荐)

说明:这里写的简洁,没有写很多兼容,移动端兼容性比较好,安卓5.1以上都可以用。用的是较新的flex声明。(这个布局是抄袭手淘团队的。)

3.普通的流式布局

说明:头部和尾部依然是fixed定位,但是#content内容部分则是用padding-top和padding-bottom来支撑页面,这种布局相当垃圾,会带来各种页面上下莫名其妙的留白问题。

三、css属性

1. word-wrap:break-word; word-break:break-all;让一行连续的数字或英文字母遇到边界自动换行。

2. -webkit-user-select:none | normal | text;这个属性是禁止用户选择、复制文字,同时还会使input框、select框不能获取焦点,导致无法输入或选择。 所以在使用这个属性时,注意防止对input和select的污染。

3. css3属性选择器。li[class*='act'],可以选中所有class中有‘act’的li元素。

$('li').attr('class').indexOf('act'); 只是获取第一个li的class,然后判断是否有‘act’;

通过for循环可以进一步操作,

for(var i = 0; i < $("li[class*='act']").length; i++){

$("li[class*='act']")[i] . . .

}

4.清除浮动,解决高度塌陷

a.伪类(抄袭bootstrap的做法)

.clearfix{}

.clearfix:after{ display:table; content:' '; clear:both; }

b.王妮的做法

.box{ clear:both; overflow:hidden; }

c.对于子元素写margin-top把父级拖下来的情况

(百度说是W3C的标准,只要破坏了父级子级紧贴的结构就可以了)

给父级写border-top,或者给父级写padding-top。采用b方法也可以,a方法无效。

5. css高度单位和颜色单位

height:calc(100vh - 200px); 目前来看,兼容性还不错。注意,减号两边是有空格的。

background:rgba(255,255,255,0.5); rgb颜色值 和 颜色透明度。

6.关于 padding-top:100%; padding-left:100%;

可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格,qq空间的照片9宫格,sina微博的照片9宫格。屏幕宽度未知,一行排3个,每个宽度都是33.33333%,但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div,这个div的默认宽度就是父级的33.33333%,再用padding-top:100%;把高度撑开,padding-top:%;就是根据已有宽度计算,padding-top:100%;padding-top的px值就和宽度相同,这样,正方形就做出来了,在正方形里面position:absolute;一个div,width:100%; height:100%;然后在这个div里面布局就好。

每个正方形的间距可以用qq空间的2px的透明边框来做,也可以像sina微博一样,用左右padding和margin-bottom来做。一张图和四张图的时候,sina是另外写两个class来做的。

qq空间是js插件写进去的,最大宽度是290px,高度是根据最大宽度计算出来的。

7. 0.5px的线

a.发现qq空间的细线,兼容2倍屏和3倍屏

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.5);

-moz-transform: scaleY(.5);

-ms-transform: scaleY(.5);

-o-transform: scaleY(.5);

transform: scaleY(.5)

}

.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

transform-origin: 100% 0

}

.action.flex:after,.action.flex>.btn:after,.feed .source:after {

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%

}

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.6666);

-moz-transform: scaleY(.6666);

-ms-transform: scaleY(.6666);

-o-transform: scaleY(.6666);

transform: scaleY(.6666)

}

}

@media only screen and (-webkit-device-pixel-ratio: 3) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.33);

-moz-transform: scaleY(.33);

-ms-transform: scaleY(.33);

-o-transform: scaleY(.33);

transform: scaleY(.33)

}

}

b. weui的作法是

.weui-cells:after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #e5e5e5;

color: #e5e5e5;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

8.背景图片尺寸background-size,img标签object-fit,object-position。

background-size:contain | cover | auto 90% | 50% auto;

这是以背景图的方式展示图片的,如果用img元素的话,

object-fit:fill | contain | cover | none | scale-down;(和background-size效果类似)

object-position:center; 和background-position的取值一样。

这两个属性一起用的话,就能让img元素src的图片效果像背景图片的效果一样,不会因为图片尺寸不成比例而走形。但是兼容性不太好,目前只适合在移动端用。

9.阻止手机弹出默认菜单,长按img标签或者长按a标签会弹出系统默认菜单(ios上,安卓上没测)。

-webkit-touch-callout:none;

10.给文字写行高时,让文字垂直居中时,要把高度也一起写了,line-height:35px; height:35px;

在用appcan做hybrid app时,发现在华为meta8上,用 ul li 做九宫格,li 浮动排在一行时,每个 li 有文字,高度用li的行高撑开的,没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字,导致九个格子没有排在3行,有格子掉下去了,排成了4行。所以,在用行高让文字居中时,高度和行高要都写上。

11. text-align:justify;

p标签内大段文字时,除了最后一行,其余的文字都是左对齐,导致段落文字距离右边间距明显大于左边。

可以利用这个属性不处理最后一行的特性,做这种布局:

上面这个布局有一点bug,最后一行是留白,把父级撑高了,原因是父级认为所有子代,包括空文本节点都是占据空间的,哪怕空格,也占据空间。可以给父级 ul 写 font-size:0;就能把底部留白去除了,然后给子代再写font-size:14px;就可以了。 但是,text-align:justify;毕竟是处理空格(拉伸空格来使内部元素水平分散),所以在html中,li 要是连着写和分段写,表现结果是不一样的,所以这种奇妙的布局还是有些许不完美,甚至不能用。

12.去除-webkit-的滚动条

#content::-webkit-scrollbar{ display:none; }

设置滚动条样式

/*滚动条宽度*/

#content::-webkit-scrollbar{ width:5px; }

/*滚动条滑块*/

#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }

/*滚动条的整个背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

TGuide

/* scrollbar */

::-webkit-scrollbar{width:10px;height:10px}

::-webkit-scrollbar-button{display:none}

::-webkit-scrollbar-track{background-color:black}

::-webkit-scrollbar-track-piece{background:#FFF}

::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}

::-webkit-scrollbar-corner{background-color:#535353}

/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/

前面不加选择器表示,所有出现滚动条的元素。

13.设置placeholder的样式

input::-webkit-input-placeholder{ color:#999; }

input::-moz-input-placeholder{ color:#999; }

input:-ms-input-placeholder{ color:#999; }

注意 -ms- 前面是一个 “ :”。

14.移动端点击某一行 :active 时添加背景色,比如 li:active{ background:#eee; } 时,要给 body标签上写ontouchstart,否则没有效果。

另一方面,给body添加,可以阻止图片被默认拖拽。百度的logo就可以被拖拽。

15.pageshow()和pagehide()方法。

问题描述:A页面跳转到B页面,在B页面操作后,返回到A页面,A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面,微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如,修改姓名,修改性别。从A页面点击input跳转到B页面进行修改操作,修改完成之后返回A页面,发现信息没有刷新,此时需要主动触发。

解决方法:可以监听pageshow方法,用addEventListener方法进行监听。pageshow()方法的触发条件是,只要页面被显示就触发,比如appcan里的B页面覆盖在A页面,把B页面关闭,A页面自然就展现出来了,那么A页面的pageshow方法就会触发;微信里,点击返回,虽然是从缓存里取页面,但也会触发pageshow方法。pagehide()顾名思义。

16.关于position。

华为meta7,安卓版本4.4.2,position:relative; 的元素比position:absolute; 的元素层级要高。百度新闻的导航效果,也是利用了这个。很奇怪。

这种结构,i.line是absolute,每个div都是relative,安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。

解决办法是,把 i.line 拿出来,和div同级。

17. background:url() no-repeat center, url() no-repeat center; 可以一次性放两个图片,中间用逗号隔开。

18.关于移动端软键盘弹起,盖住页面的问题。

核心解决办法是利用 document.activeElement.scrollIntoView(false); 参数false,表示activeElement的元素与页面下边对齐,true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。

另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded(); 这个方法效果不是很好,没有上面那个好用。

19.常见于小说、报纸排版的column布局。

常用的5个属性有4个是知晓效果的:

column-width:; 每列的宽度。

column-gap:; 列与列之间的间距。

column-fill:; 不知有何软用。

column-rule:; 列与列直接的分割线,与border属性效果一样。

column-count:; 总共分多少列。(这个属性受column-width,当同时写上column-width和column-count时,以column-width优先,比如总宽度800px,height:200px; column-width:400px; column-count:4; 显然,800px最多只能分2列,所以优先以column-width进行计算。)

小兼容:ios上,横向滚动 overflow-x:auto; 的容器不适合直接当成分栏布局的容器,应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现,分栏线,column-rule不跟随容器滚动的奇异现象。另外,column-gap不适合赋值,应当将column-gap写成0,列与列之间的间距可以用分栏布局的子元素的左右padding来做。

大段文字

.box{ width:300px; height:14em; overflow-x:auto; } /*滚动的容器*/

.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分栏的容器*/

.col > p{ padding:0 .5em; line-height:1.2; } /*文字内容的容器,加左右padding以增加列与列之间的间距。*/

四、貌似很多webapp都会写两个meta标签

不确定是否支持16进制的颜色值。(好像测试过,16进制颜色没有效果。在appcan里也没有效果。)

五、 一般不能上传相同图片

可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。

六、在安卓上touchmove出现了神奇的bug,百度上说,安卓上touchmove的一瞬间就会触发touchcancel,touch事件就全部被取消了。IOS上是没有这个问题的。

解决方法是:在touchmove里写e.preventDefault();即可。但是这样的话,手指滑动页面就不能scroll了。页面将无法滚动了。

七、flex布局

1. 2012年以后的版本

给父级添加 display:-webkit-flex; display:flex;

flex盒子内子元素的排列方向称作主轴,与主轴垂直的称作交叉轴。

flex盒子内的子元素可以被作项目。

注意:设为flex后,其子元素的float、clear、vertical-align属性就会失效。

a.作用于父级的6个属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content。

//子元素的排列方向

flex-direction:row(默认值,从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上);

//子元素是否换行

flex-wrap:nowrap(默认值,不换行) | wrap(换行) | wrap-reverse(换行,但第一行在下方);

//子元素排列方向和子元素是否换行的简写

flex-flow:row nowrap;(默认值,从左到右,不换行。)

//项目(子元素)在主轴上的对齐方式

justify-content:flex-start(默认值,以起点为始) | flex-end(以终点为始) | center(居中) | space-between(首尾两个元素紧贴边界,其余元素之间间隔相等) | space-around(每个项目的两侧间隔相等,相当于给每个项目加了margin,并且左右margin相等。所以首尾元素与边界都是有间距的。);

//项目(子元素)在交叉轴上的对齐方式

align-items:flex-start(以起点为始) | flex-end(以终点为始) | center(居中) | baseline(与项目的第一行文字的基线对齐) | stretch(默认值,在交叉轴方向撑满父级);

//多根轴线的对齐方式,如果只有一根轴线,该属性不起作用。

align-content:flex-start(与交叉轴的起点对齐) | flex-end(与交叉轴的终点对齐) | center(与交叉轴的中点对齐) | space-between(与交叉轴两端对齐,轴线之间的间隔平均分布) | space-around(每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍,第一行和最后一行不会紧贴边框) | stretch(默认值,铺满整个交叉轴);

( align-content:stretch; 第一根轴线与边框对齐,其他轴线均分父级间隙。 )

b.作用于项目(子元素)的6个属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self。

//子元素的排列顺序

order:0(默认值) | 1 | 2 | 3 . . .

//项目(子元素)的放大比例

flex-grow:0(默认值,默认不放大,尽管有剩余空间) | 1 | 2 | 3 . . .

//项目的缩小比例

flex-shrink:1(默认值,当空间不足时,该项目将缩小) | 0(不论如何,都不缩小);

//项目占据的主轴空间

flex-basis:auto(默认值,项目本来的大小) | 固定值(200px,50%,100% . . .);

//flex-grow,flex-shrink,flex-basis的简写 flex :0 1 auto;

flex:0 1 auto(默认值,有多余空间也不放大,但空间不足会缩小,默认占据空间就是自身大小);

flex:auto; => flex:1 1 auto; 根据空间大小,可放大可缩小。(有兼容性问题,chrome可以正常解析 flex:auto; -- flex:1 1 auto; 但 IE 就搞笑了,IE10解析出来的flex:auto -- flex:1 0 auto;只放大,不缩小。IE11解析出来的flex:auto;和chrome一样,可放大可缩小。所以在用这个属性的时候,要写完整值,不要简写。)

flex:none; -- flex:0 0 auto;不放大,也不缩小。

//单个项目与其他项目不一样的对齐方式,会覆盖父级的align-items;

align-self:auto(默认值, 继承父级的align-items的值) | flex-start | flex-end | center | baseline | stretch; 除了auto,其他的与父级align-items属性一致。

注意要活用align-self:stretch;和align-items:stretch;

2. 2009年的版本

目前新版本被支持的很好,所以旧版的直接写带前缀的。

display:-webkit-box; display:-ms-flexbox;

子元素如果有display:inline的,要把子元素写成display:block; 2012年的版本不需要。

a.父级的5个属性。-webkit-box-pack,-webkit-box-align,-webkit-box-direction,-webkit-box-orient,-webkit-box-lines。

//项目在主轴上的对齐方式

-webkit-box-pack:start(默认值,从起点开始) | end | center | justify;

//项目在交叉轴上的对齐方式

-webkit-box-align:stretch(默认值,交叉轴方向撑满父级) | start | end | center | baseline;

//项目的排列顺序

-webkit-box-direction:normal(默认值,以起点为始) | reverse(以终点为始);

//主轴方向

-webkit-box-orient:horizontal(默认值,水平方向) | vertical(垂直方向) | inline-axis(行内方式,映射为horizontal) | block-axis(块方式排列,映射为vertical);

//项目(子元素是否换行)

box-lines:single(默认值,不允许) | multiple(允许);

经测试,没有浏览器支持,这个属性不能用。

b.子元素的3个属性。box-flex,box-flex-group,box-ordinal-group。

//是否缩放

-webkit-box-flex:0(默认值,不放大也不缩小) | 1 | 2 | 3 . . .;

//子元素排列次序

-webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。

3. 对 1、2 的小结。

2012年版本比2009年的版本主要多了两个属性,1个是子元素是否换行,flex-wrap,2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式,2012年的justify-content:space-around; 2009年的没有这个效果,但是可以通过加左右padding值的方式做到。

如果要兼容2009年版本的盒子布局又想换行的,只能改用float布局。

八、html结构嵌套问题

p标签内不要嵌套块元素,其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。

类似的,还有a标签里不能再出现a标签,嵌套多少层都不行。

html标签嵌套要按照块元素包含行间元素的规则来写。

九、标签

让浏览器用最新内核渲染。

十、form标签一点特性

在移动端,input框获取焦点时,浏览器会弹出软键盘,想让软键盘的enter键变成搜索两个字,需要让这个input按照这种结构写:

说明:onsubmit='return false';阻止表单默认提交,便于自己操作。

input 的 type 必须是 search。

input 的 加了style='position:relative;',防止ios上点击搜索按钮会闪屏(白屏)。

十一、浏览器兼容

1.关于table表格的宽度设置问题。

Firefox和chrome的解析方式是不一样的,chrome会把你写的table宽度全部转化成px。Firefox则不会,所以在td写行间样式宽度时,不能百分比和px混用,要统一,要么每个td都写百分比的宽,要么都写px的宽;不要这几个td写百分比,那几个td写px。

2.某些安卓不识别height:calc(); 可以用flex布局代替。

十二、KTV字幕效果

实现方式1:

把文字写两遍,两个行间元素span,包裹相同的文字。

首页

首页

或者

首页

首页

实现原理是:让内部两个span宽度相等,其中一个设置width:0%;overflow:hidden; 然后用js动态控制width从0% -- 100%。

实现方式2:(张鑫旭说只适用于chrome,但是我测了下,好像firefox也是可以的。)

实现原理:background-image是覆盖在background-color上的,chrome有个私有属性 -webkit-background-clip:text; 意为背景裁切,以文字为裁切起止。效果就是背景图片只会展示文字的书写路径,除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent; 将文字渲染的颜色写为透明,这样,文字路径就透出了背景图。再改变背景图片的水平位置,就能露出文字和背景图片下的背景颜色,就做到KTV字母效果了。

核心的css属性:

background-image:url(); /*纯色的背景图,用来渲染文字颜色,因为文字是透明的。*/

background-repeat:no-repeat;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-position:0 0;

↑改变他就可以了。

关于实现方式2的图示:

求CSS加遮罩的操作方法

具体解决方案如下:
一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。
clientHeight
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
在FF下,offsetHeight是页面具体内容的高度
scrollHeight
在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。
复制代码 代码如下:
function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}

三、页面上必须放置一个div,作为遮罩层,下面是这个遮罩层的css样式。
复制代码 代码如下:
.lockDiv
{
position:absolute;
left:0;
top:0;
height:0;
width:0;
border:2 solid red;
display:none;
text-align:center;
background-color:#DBDBDB;
filter:Alpha(opacity=60);
}

四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block";
timeHdl = window.setTimeout(DisablePage,200);
}
}

五、如果页面上使用了ASP.net的Validator控件,那么应该使用如下的javascript。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(false == Page_IsValid)
{
sandglassSpan = 0;
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
ctrlSandglass.style.display = "block";
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
timeHdl = window.setTimeout(DisablePageHaveValidator, 200);
}
}

参考资料:http://www.guanzhunet.com/a/paper/2011/0829/453.html

求CSS加遮罩的操作方法

具体解决方案如下:
一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。
clientHeight
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
在FF下,offsetHeight是页面具体内容的高度
scrollHeight
在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。
复制代码 代码如下:
function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}

三、页面上必须放置一个div,作为遮罩层,下面是这个遮罩层的css样式。
复制代码 代码如下:
.lockDiv
{
position:absolute;
left:0;
top:0;
height:0;
width:0;
border:2 solid red;
display:none;
text-align:center;
background-color:#DBDBDB;
filter:Alpha(opacity=60);
}

四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block";
timeHdl = window.setTimeout(DisablePage,200);
}
}

五、如果页面上使用了ASP.net的Validator控件,那么应该使用如下的javascript。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(false == Page_IsValid)
{
sandglassSpan = 0;
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
ctrlSandglass.style.display = "block";
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
timeHdl = window.setTimeout(DisablePageHaveValidator, 200);
}
}

参考资料:http://www.guanzhunet.com/a/paper/2011/0829/453.html

HTML中如何使用遮罩层

第一步:新建一个html页面

页面中先做出一个【领红包】的按钮,如图(图中左侧是效果右侧是代码),点击这个按钮就会弹出一个红包的活动消息,即我们要的遮罩效果
css遮罩层怎么做
css遮罩层怎么做

第二步:做出遮罩层

遮罩层的作用就是将层后面的内容都遮住,覆盖全屏,所以:

宽高都设为:100%;

位置 position:absolute;left:0; top:0;

背景色 一般都设为透明的 background: rgba(0,0,0,0.5);

层的顺序 z-index:100; (设置一个比较大的数值)
css遮罩层怎么做

第三步:做出遮罩层上的内容

1、在遮罩层上添加活动效果图

2、关闭活动信息弹出框的【关闭】按钮

注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大,z-index:101

如图(左侧效果,右侧代码)
css遮罩层怎么做
css遮罩层怎么做

第四步:用js实现遮罩效果演示

首先我们看到的页面上是没有遮罩层的,只有一个【领红包】的按钮在页面中;

然后我们点就【领红包】按钮,就弹出遮罩效果;再要关闭遮罩层时点击右上角的关闭按钮,就退出了遮罩成的活动信息。具体操作如下:

1、将遮罩层隐藏起来 display:none;

2、点击【领红包】时,遮罩层显示 display:block;

3、点击关闭按钮,遮罩层消失 display:none;

如图
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做

HTML中如何使用遮罩层

第一步:新建一个html页面

页面中先做出一个【领红包】的按钮,如图(图中左侧是效果右侧是代码),点击这个按钮就会弹出一个红包的活动消息,即我们要的遮罩效果
css遮罩层怎么做
css遮罩层怎么做

第二步:做出遮罩层

遮罩层的作用就是将层后面的内容都遮住,覆盖全屏,所以:

宽高都设为:100%;

位置 position:absolute;left:0; top:0;

背景色 一般都设为透明的 background: rgba(0,0,0,0.5);

层的顺序 z-index:100; (设置一个比较大的数值)
css遮罩层怎么做

第三步:做出遮罩层上的内容

1、在遮罩层上添加活动效果图

2、关闭活动信息弹出框的【关闭】按钮

注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大,z-index:101

如图(左侧效果,右侧代码)
css遮罩层怎么做
css遮罩层怎么做

第四步:用js实现遮罩效果演示

首先我们看到的页面上是没有遮罩层的,只有一个【领红包】的按钮在页面中;

然后我们点就【领红包】按钮,就弹出遮罩效果;再要关闭遮罩层时点击右上角的关闭按钮,就退出了遮罩成的活动信息。具体操作如下:

1、将遮罩层隐藏起来 display:none;

2、点击【领红包】时,遮罩层显示 display:block;

3、点击关闭按钮,遮罩层消失 display:none;

如图
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做

CSS遮罩层不能完全遮罩页面

CSS遮罩层不能完全遮罩页面,是设置错误造成的,解决方法如下:

1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。

2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position: relative;这个主要是为了让遮罩层做绝对定位做准备的。

3、再看下遮罩层样式定义,代码如图,其中需要注意的是定位样式,设置了absolute的绝对定位,另外还有半透明的background样式设置:background: rgba(0, 0, 0, 0.7);。可以通过修改后面的0.7这个数字来改变透明度。

4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,所以先引入jquery脚本库。

5、添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。

6、刷新页面,在页面上是正常显示的图片,当把鼠标放上去时,就显示了遮罩层了。

如何用css实现半透明遮罩层效果

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;
来解决这个问题

完整的代码:

<div class="mask opacity"></div>


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;

给你一个例子:

<!DOCTYPE html> 
<html> 
<head> 
<meta 
charset="gb2312" /> 
<title>背景半透明覆盖整个可视区域</title> 

<style> 
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;} 
</style> 
</head> 
<body> 
<p 
class="ph">place holder height:1000px;</p> 
<div class="mask 
opacity"></div> 
<div class="content"> 

<h1>背景半透明覆盖整个可视区域</h1> 
<p> 
这个效果效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现,高手请绕道。 
</p> 
<p>html代码很简单 < d i v class="mask opacity">< / d i 
v > </p> 
<p> 1 、半透明效果可以使用 css3 中的 opacity 
属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: 

<code>.opacity{ opacity:0.3; 
filter: alpha(opacity=30); background-color:#000; }</code> </p> 

<p> 2 、要覆盖整个可视区域通常的做法是: <br/> 
<code> html,body{ 
height:100%} </code> <br/> 

<code>.mask{height:100%;width:100%;}</code> <br/> 

但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用<code>position:fixed; 
</code>来解决这个问题 </p> 
<p> 
<strong>完整的代码</strong>: 
<pre> 
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; } 
</pre> 
</p> 

<p> <strong>参考资料:</strong>

<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>

<a href="http://.com">垂直居中的几种实现方法</a>

<a href="http://tieba.baidu.com">DIV高度100%</a>

</p> 
</div> 
</body> 

</html>

如何用css实现半透明遮罩层效果

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;
来解决这个问题

完整的代码:

<div class="mask opacity"></div>


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;

给你一个例子:

<!DOCTYPE html> 
<html> 
<head> 
<meta 
charset="gb2312" /> 
<title>背景半透明覆盖整个可视区域</title> 

<style> 
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;} 
</style> 
</head> 
<body> 
<p 
class="ph">place holder height:1000px;</p> 
<div class="mask 
opacity"></div> 
<div class="content"> 

<h1>背景半透明覆盖整个可视区域</h1> 
<p> 
这个效果效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现,高手请绕道。 
</p> 
<p>html代码很简单 < d i v class="mask opacity">< / d i 
v > </p> 
<p> 1 、半透明效果可以使用 css3 中的 opacity 
属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: 

<code>.opacity{ opacity:0.3; 
filter: alpha(opacity=30); background-color:#000; }</code> </p> 

<p> 2 、要覆盖整个可视区域通常的做法是: <br/> 
<code> html,body{ 
height:100%} </code> <br/> 

<code>.mask{height:100%;width:100%;}</code> <br/> 

但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用<code>position:fixed; 
</code>来解决这个问题 </p> 
<p> 
<strong>完整的代码</strong>: 
<pre> 
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; } 
</pre> 
</p> 

<p> <strong>参考资料:</strong>

<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>

<a href="http://.com">垂直居中的几种实现方法</a>

<a href="http://tieba.baidu.com">DIV高度100%</a>

</p> 
</div> 
</body> 

</html>

html css 做网页为什么手机上显示不全背景,而电脑上就没问题,怎么改啊?

在做背景时,你让背景的尺寸为100%;这样就能现实全了。而且让装背景的div的宽度也要100%;这样基本就ok

如何在浏览器窗口上添加一个遮罩层

本篇文章为你介绍使用css实现网页遮罩效果,主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。

给你的弹窗加个遮罩

遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用CSS来实现遮罩

dom节点代码:

<!-- 进度条遮罩 --><t:p id="shade" styleClass="shade" > </t:p>

CSS样式代码

.ui-progressbar{ position: absolute; top:40%; left:40%; z-index: 99999999; width:500px; height:22px; line-height:22px; display:none; } .ui-progressbar-value { background-image: url("../images/pbar-ani.gif"); border:0px; } .shade { background:rgba(0, 0, 0, 0.4); width:100%; height:100%; position: absolute; z-index:99; left:0px; top:0px; opacity:0.6; filter:alpha(opacity=60); display:none; }

主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。

如何在浏览器窗口上添加一个遮罩层

本篇文章为你介绍使用css实现网页遮罩效果,主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。

给你的弹窗加个遮罩

遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用CSS来实现遮罩

dom节点代码:

<!-- 进度条遮罩 --><t:p id="shade" styleClass="shade" > </t:p>

CSS样式代码

.ui-progressbar{ position: absolute; top:40%; left:40%; z-index: 99999999; width:500px; height:22px; line-height:22px; display:none; } .ui-progressbar-value { background-image: url("../images/pbar-ani.gif"); border:0px; } .shade { background:rgba(0, 0, 0, 0.4); width:100%; height:100%; position: absolute; z-index:99; left:0px; top:0px; opacity:0.6; filter:alpha(opacity=60); display:none; }

主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。

js弹出的遮罩层,如何能遮住全屏?

工具:电脑;浏览器;ultraedit软件;

操作步骤如下:

1、打开UE编辑器,新建一个空白的html文件和css文件;

2、在html文件中输入以下html代码;

3、在css文件中输入以下css代码;

4、编辑完成之后,选择格式为UTF8-无 BOM模式,保存文件;

5、在浏览器中打开此html文件,可以看到最终想要实现的遮住全屏效果。

css如何实现鼠标移至图片上显示遮罩层及文字

1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。

2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备我们的绝对定位口罩。

3.看看蒙版层的样式定义。代码如图所示。

背景:rgba(0,0,0,0.7);

透明度可以通过修改后面的0.7号来改变。1是完全不透明的,0是完全透明的。

4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的,既方便又简单,所以我们首先介绍jquery脚本库。

5.添加mouseover和mouseout事件,主要是当鼠标移动到图像容器上时显示蒙版层,当鼠标移出时隐藏蒙版层。

6.刷新页面,您可以看到页面上显示的正常图片。

7.当我们把鼠标放在蒙版层上时,蒙版层就会显示出来。

气吉美食网还为您提供以下相关内容希望对您有帮助:

我在做移动端时遇见的css问题

一、在做手机轮播图时,banner图的宽度是手机屏幕的宽度,轮播图加了左右切换按钮,按钮的position:absolute;定位的元素,定位的元素超出父容器时(超出了100%),会出现滚动条。 二、在移动端有3种布局可选。 1.定位布局 说明:头部、尾部是...

CSS遮罩层不能完全遮罩页面

1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position: relative;这个主要是为...

求CSS加遮罩的操作方法

一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。offsetHei...

如何用css实现半透明遮罩层效果

1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法...

安卓html元素被点击时产生的边框怎么去掉

如果想要禁用高亮,可设置颜色的alpha值为0,也就是属性值的最后一位设置为0就可以去除背景或者边框。去除android链接触摸时产生边框的css代码 a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除...

如何在浏览器窗口上添加一个遮罩层

实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1: 首先我们要考虑定义一个遮挡浏览器窗口的div,考虑下面一段html+css代码: &lt;div unselectable="on" style="background:#000;filter:alpha(opacity=10);o...

关于html div-css手机浏览器显示的问题

你要添加一个语句 让浏览器自动检测设备的分辨率 然后自己再写一个css去适应手机的小分辨 当检测到不懂分辨率 调用不同的css http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 这个网页可以帮助你 ...

CSS/HTML 浮动框被遮挡住

给灰色的框加一个代码 z-index:999 这样就不会遮罩了。

手机web版的页面(html/css)怎么兼容所有浏览器和各个手机屏幕分辨率_百度...

既然是手机web端页面,这里的尺寸应该指的是浏览器的可视区域!同样是5寸屏,一些有问题一些木有问题。那他们的不同点就在于浏览器的可视区域不一样。针对这类极小部分的适配问题。可以通过。css适配做出适当调整://手机...

在HTML+CSS中如何实现上一个div覆盖下一个div的border-top部分...

divn n=1,2,。。。n 你这个意思不就是div1在最上层么 那么div1 z-index:999 依次递减 再设置每个div margin-top:-1px; //大小看你border-top而定 很简单

显示全文

猜你还关注