CSS创建一个遮罩层

   .layer{
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=50);
    z-index: 99;
    height: 100%;
    margin:0 auto;
    }

创建一个遮罩层。

CSS创建一个遮罩层

时间： 2024-10-10 07:25:33

CSS创建一个遮罩层的相关文章

在弹窗中新建一个遮罩层

一.mask-div 在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西. 实现后的效果: 当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗. 二.设置遮罩层样式要实现遮住全屏,可以这样来设置属性,兼容FF.chrome #mask-div{background-color:black; position:fixed;

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

背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

根据juery CSS点击一个标签弹出一个遮罩层的简单示例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/JavaScript/jq

使用CSS创建一个图片角标

角标是一个给某元素标明“New”,"Popular"等以表示强调的好方法,常应用于图片. 下面就利用CSS和HTML实现了图片的角标效果. 创建两个元素,一个用于创建角标,一个用于角标内的文本. <p><span>Popular</span></p> 角标必须用绝对定位才能正确实现效果. <article> <img src="bacon.jpg"/> <h2>Some title&

Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

题目点评三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单答题要点 1.采用的是均分原理盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部 2.代码的实现第一步保证元素是块级元素第二步设置元素的边框第三步不需要显示的边框使用透明色示例代码 [css] view plain copy .square{ width:0; height:0; margin:0 auto;

用CSS创建一个美观的按钮（button）

<button>标签默认的按钮很丑,我们要想把它变得美观,可以像这样做: 示例代码:button.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML CSS Exercise CSS3 button</title> <style type="text/css"> button { wi

用纯css创建一个三角形

.triangle{ width: 0;height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 120px solid red; }

页面用一个遮罩层显示加载，加载完后隐藏该div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "><img src="/content/5-12120419410

做一个简单的遮罩层

首先,我们写一个遮罩层,没错就是那种页面有一个按钮,点击按钮遮罩层出现,遮罩层上面的按钮也出现 , 点击遮罩层上面的按钮,遮罩层隐藏,遮罩层上的按钮也隐藏先来看看页面html代码 <style> * {margin: 0;padding: 0;} html,body {width: 100%;} .mask {position: fixed;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0