父元素:position:fixed;
让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
<style>
.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;}
.loading .pic {width:50px;height:50px;background:url(images/loading.gif);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style> <div class="loading">
<div class="pic"></div>
</div>

在线css兼容性处理地址:autoprefixer.github.io

css遮罩层的更多相关文章

  1. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  2. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  3. CSS 遮罩层、滑出页面

    <style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...

  4. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  5. div+css 遮罩层

    CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{    ...

  6. CSS遮罩层,全兼容

    <script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...

  7. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

随机推荐

  1. Customize Web Sessions List

    To customize Fiddler's Web Sessions List, add rules using FiddlerScript to the OnBeforeRequest funct ...

  2. 图像检索:RGBHistogram+欧几里得距离|卡方距离

    RGBHistogram: 分别计算把彩色图像的三个通道R.G.B的一维直方图,然后把这三个通道的颜色直方图结合起来,就是颜色的描写叙述子RGBHistogram. 以下给出计算RGBHistogra ...

  3. Android 建立手机与手表数据同步机制总结

    Android Wear 数据同步机制总结 当手机与手表建立蓝牙连接之后.数据就能够通过Google Play Service进行传输. 同步数据对象Data Item DataItem提供手机与手表 ...

  4. Postgresql学习笔记

    一:数据类型 主要有三大类以及其他一些杂项类型: 数值型.字符型.日期型. 数值型: 名称 描述 存储大小 范围 smallint 存储整数,小范围 2字节 -32768 至 +32767 integ ...

  5. CSDN开源夏令营 基于Compiz的switcher插件设计与实现之编译compiz源代码

    在開始介绍之前先吐个嘈:上周我们暑期ACM集训開始了.平均下来基本上是一天一赛.有时还不止.又是多校联赛,又是CodeForces,又是TopCoder.又是BestCoder,又是AcDream.还 ...

  6. python之模块contextlib 加强with语句而存在

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之模块contextlib,为加强with语句而存在 #特别注意:python3和python2 ...

  7. C++高性能转换大小写算法

    简述 有一个需求,是需要将URL中的query参数的key全部转换为小写或者大写,键值对的数量有点多,但全部都是英文字母,无需考虑非字母的情况. 实现比较快的做法是使用STL或C标准库中的转换接口,如 ...

  8. 微软的在线文档存储OneDrive使用帮助

    onedrive默认空间5G,对于一般的文档存储够用的,很方便不限速!!! ###官方介绍 https://support.office.com/zh-cn/article/%E4%BA%86%E8% ...

  9. 《Java设计模式》之模板方法模式

    模板方法模式是类的行为模式.准备一个抽象类.将部分逻辑以详细方法以及详细构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类能够以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...

  10. 用命令行发邮件——让你更加了解smtp

    本文演示用命令行发送邮件的过程. SMTP 首先介绍下smtp协议--简单邮件传输协议 (Simple Mail Transfer Protocol, SMTP) 是事实上的在Internet传输em ...