添加遮罩css,添加遮罩层

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

dom节点代码：

css样式代码

1 .ui-progressbar{

2 position: absolute;

3 top:40%;

4 left:40%;

5 z-index: 99999999;

6 width:500px;

7 height:22px;

8 line-height:22px;

9 display:none;

10 }

11 .ui-progressbar-value

12 {

13 background-image: url("../images/pbar-ani.gif");

14 border:0px;

15 }

16 .shade

17 {

18 background:rgba(0, 0, 0, 0.4);

19 width:100%;

20 height:100%;

21 position: absolute;

22 z-index:99;

23 left:0px;

24 top:0px;

25 opacity:0.6;

26 filter:alpha(opacity=60);

27 display:none;

28 }

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

添加遮罩css,添加遮罩层相关推荐

CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
html如何通过路径查找图片,css添加图片怎样找图片路径？
css添加图片怎样找图片路径? 在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到. 现在来看两个文件目录:/css/admin/main.css ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
获取js里添加的css文件,用JS添加一个css文件
我在这里发现了一些关于我的问题的问题,但我无法使用它. 通过JS点击它们时我会改变的CSS属性,JQuery的用JS添加一个css文件 Green Red /*$(document).ready(fu ...
用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
CSS 添加背景图片
CSS样式代码: <style>.backimage {/*设置图片大小*/width: 980px;height: 200px;/*背景图像将仅显示一次 no-repeat*/backg ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...

添加遮罩css,添加遮罩层

添加遮罩css,添加遮罩层相关推荐

最新文章

热门文章