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. Linux 系统开启最大线程数 调优

    系统最大线程数说明 系统可开启的最大线程数,可根据系统本身负载配置进行调优. 查看系统最大线程数 1.查看系统开启的最大线程数. ulimit -u [root@izbp1brwu1w35r1dmj8 ...

  2. 谷歌技术"三宝"之GFS

    题记:初学分布式文件系统,写篇博客加深点印象.GFS的特点是使用一堆廉价的商用计算机支撑大规模数据处理. 虽然"The Google File System " 是03年发表的老文 ...

  3. nrm 安装与使用

    1.使用 npm install nrm -global 全局安装 2.安装完成后使用 nrm ls命令查看其维护的镜像地址列表 3.* 星号表示在使用 npm下载资源的时候,默认使用的地址 这里需要 ...

  4. opencv学习之路（28）、轮廓查找与绘制（七）——位置关系及轮廓匹配

    一.点与轮廓的距离及位置关系 #include "opencv2/opencv.hpp" #include <iostream> using namespace std ...

  5. JS设计模式（12）装饰者模式

    什么是装饰者模式? 定义:动态地给一个对象添加一些额外的职责.就增加功能来说,装饰器模式相比生成子类更为灵活. 主要解决:一般的,我们为了扩展一个类经常使用继承方式实现,由于继承为类引入静态特征,并且 ...

  6. python之路——模块和包

    阅读目录 一 模块 3.1 import 3.2 from ... import... 3.3 把模块当做脚本执行 3.4 模块搜索路径 3.5 编译python文件 二 包 2.2 import 2 ...

  7. mongodb ----> 从入门到。。。

    环境: centos6.8,jdk1.8.0_u172,mongodb-4.0.0,spring boot-1.5.15 1.环境搭建 tar -zxvf mongodb-linux-x86_64-r ...

  8. SG函数值

    如果只有单个游戏,只需找必胜态就行,不用找sg函数值,这样节省一个常数的时间. 但是多个游戏时一定要sg函数的异或来判断成败.因为虽然必败态一定到必胜态,但是必胜态不一定到必败态就是最优的.而单个游戏 ...

  9. 5、SAMBA服务一：参数详解

    ①:SAMBA服务一:参数详解 ②:SAMBA服务二:配置实例 一.SAMBA简介 samba指SMB(Server Message Block,服务器信息块)协议在网络上的计算机之间远程共享Linu ...

  10. Android studio 中，遇到报错：ERROR: x86_64 emulation currently requires hardware acceleration! CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1)的解决方法

    在 Android SDK 的安装目录下找到intelhaxm-android.exe安装即可.忘记目录位置直接在“计算机”中搜索,如果没有,返回Android studio 的“设置”,找到 这个图 ...