Purpose: Using a picture as the background of a page with blurred effect, while the content not blurred.

Solution: Using two div elements, one has the class that blurs the picture and covers the whole page, the other has the class setting z-index -1, and set absolute positions.

Front-end: Using blurred backgrounds with contents unaffected.的更多相关文章

  1. 充实你的素材库！10款免费的 PSD 素材下载

    由于网页设计师没有时间来自己从零开始设计,所以在设计项目中使用网络上已有的设计素材是常见的方式.这就是为什么我们经常会到网上搜索可以免费下载的素材. 今天,我们这里有几套不同的免费的 PSD 素材分享 ...

  2. [翻译] Canvas 不用写代码的动画

    Canvas 不用写代码的动画 https://github.com/CanvasPod/Canvas Canvas is a project to simplify iOS development ...

  3. Typora: Markdown Reference (Typora下Markdown语法使用说明)

    引言 由于一直在使用Typora,这个是我使用过的最棒的Markdown编辑器,但是总是忽略某一个功能,于是决定认真看一下其帮助文档 这里做一个简单主要功能的中文翻译(按键对应Windows下). 标 ...

  4. VES Hand Book Contents

    3...ABOUT THE VES4...Foreword 6...Chapter 1......Introduction6......Visual Effects and Special Effec ...

  5. CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...

  6. Contents

    Contents 占位 ---------------------------------- Python3中的字符串函数学习总结

  7. 博文Contents<201--到000—>

    ====================================--------------------------------- 前言:博客中的随笔文章.并非都是笔者的原创文章.有些是听别人 ...

  8. Java Web项目报错java.lang.NullPointerException at org.apache.jsp.front.index_jsp._jspInit(index_jsp.java:30)

    环境:myeclipse+tomcat6+jdk6 今天搭建了一个Java Web项目,访问index.jsp时报如下错误: 严重: Servlet.service() for servlet jsp ...

  9. 如何将MySQL help contents的内容有层次的输出

    经常会遇到这种情况,在一个不能上网的环境通过MySQL客户端登录数据库,想执行一个操作,却忘了操作的具体语法,各种不方便. 其实,MySQL数据库内置了帮助文档,通过help contents即可查看 ...

随机推荐

  1. Ansible 的安装

    On Fedora: $ sudo dnf install ansible On RHEL and CentOS: $ sudo yum install ansible On Ubuntu: $ su ...

  2. CSS3 3D酷炫立方体变换动画

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代 ...

  3. Vue提供操作DOM的方法

    <div ref="wrapper"> Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs.在这里,我们通过了 this.$refs.wrapp ...

  4. Mock.js　虚拟接口 数据模拟

    Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参 ...

  5. Windows 启用/禁用内置管理员 Administrator

    关于启用 Windows 系统内置的管理员 Administrator 的方法还是许多的,其中普遍的一种应该就是进入(我的电脑/计算机右键管理/Windows + R输入 compmgmt.msc)计 ...

  6. idea maven列表有问题的

     idea maven列表有问题的,覆盖   C:\Users\用户名\.IntelliJIdea2017.2\system\Maven\Indices路径大致在这里  文件为 Indices.rar ...

  7. Yarn 踩坑 ： Could not find or load main class org.apache.hadoop.mapreduce.v2.app.MRAppMaster

    原因:yarn-site.xml 中,yarn.application.classpath 未配置 解决:其中 hadoop 版本对应更改 <property> <name>y ...

  8. Redis学习--Redis数据类型

    Redis的5种基本类型 1.String 2.Hash 3.List 4.Set 5.Sorted Set String常见用法 1.get key 返回value 2.set key value ...

  9. 调试.vs08

    1.vs2008 在调试的时候出现如下状况: 关键字:“不会命中断点.源代码与原始版本不同.”(ZC:我的情况是 main.cpp里面的断点是有效的,但是执行到另一个cpp里面时 这个文件里面的断点都 ...

  10. [python]windows截图

    Windows截图 截图:截取屏幕任意大小图片 下载pip install Pillow from PIL import ImageGrab # x1:开始截图的x坐标 # x2:开始截图的y坐标; ...