添加模糊效果demo:

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

	<title>模糊背景</title>

	<style type="text/css">

		*{

			padding:0;

			margin:0;

		}

		html,body{

			height:100%;

		}

		.wrap{

			min-height:100%;

		}

		.mian{

		}

		.content{

			height:100px;

			position:relative;

			overflow:hidden;

		}

		.content .text{

			color:#fff;

			padding:10px;

		}

		.background{

			position:absolute;

			top:0;

			left:0;

			width:100%;

			height:100%;

			z-index:-1;

			background:url("./images/bg.jpg") center center no-repeat;

			background-size:100% 100;

			filter:blur(10px)

		}

	</style>

</head>

<body>

    <div class="wrap">

    	<div class=main>

    	     <div class="content">

    	     	<div class="text">我是内容</div>

    		    <div class="background"></div>

    	     </div>

    	</div>

    </div>

</body>

</html>

　　

添加模糊效果demo的更多相关文章

  1. [Xcode 实际操作]六、媒体与动画-(6)使用UIBlurEffect给图片添加模糊效果

    目录:[Swift]Xcode实际操作 本文将演示如何给图像添加模糊效果. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  2. u-boot界面添加命令[demo]

    目标板:2440 如何在u-boot界面中增加命令 在/common/目录下建立文件,调用执行函数do_bootm就行,然后在修改Makefile,就OK了. 比如在u-boot界面添加命令test ...

  3. iOS图片模糊效果与阴影效果

    /** 添加图片模糊效果 @parms  要添加模糊效果的view @return */ + (UIVisualEffectView *)addVisualEffectViewWithView:(UI ...

  4. iOS开发-- 创建podspec文件，为自己的项目添加pod支持

    开篇扯淡 作为一个iOS开发者,一定用过CocoaPods吧,没用过?点这儿去面壁吧 Cocoapods作为iOS开发的包管理器,给我们的开发带来了极大的便利,而且越来越多的第三方类库支持Pod,可以 ...

  5. Wix 安装部署教程（四） 添加安装文件及快捷方式

    通过之前三篇的介绍,大家对wix的xml部署方式也应该有一些认识,今天天气不错,再来一发.主要介绍桌面,开始菜单,卸载等功能的如何添加.希望园友们支持! 一.如何添加文件 Demo打包程序很简单,就一 ...

  6. 为MFC界面添加一个Log Window

    前言 由于早期的图像处理程序基于VC6.0,MFC也是采用VC6.0开发的.在实际处理中,我不仅需要界面的显示,有很多时候,我需要算法处理的过程中的信息,比如每个阶段的耗时,处理的图像大小,以及如果需 ...

  7. JavaScript实现http地址自动检测并添加URL链接

    一.天生我材必有用 给http字符自动添加URL链接是比较常见的一项功能.举两个我最近常用到的自动检测http://地址并添加链接的例子吧,首先是QQ邮箱,在使用QQ邮箱时,如果输入了URL地址(ht ...

  8. backdrop-filter 和filter 写出高斯模糊效果 以及两者区别

    http://www.w3cplus.com/css3/advanced-css-filters.html: backdrop-filter:blur(10px);只支持ios端:只作用于当前元素: ...

  9. iOS8模糊效果UIVisualEffectView的使用

    iOS8模糊效果UIVisualEffectView的使用 效果: 源码: // // ViewController.m // EffectView // // Created by XianMing ...

随机推荐

  1. 迪米特法则（Law of Demeter）LoD

    using System; using System.Collections.Generic; using System.Text; namespace LawOfDemeter { //也叫Leas ...

  2. Django自定义登陆验证后台

    支持邮箱/手机号/昵称登录,在django1.6.2测试成功.1.models # -*- encoding: utf-8 -*- from django.db import models from ...

  3. FZU 2216——The Longest Straight——————【二分、枚举】

    Problem 2216 The Longest Straight Accept: 17    Submit: 39Time Limit: 1000 mSec    Memory Limit : 32 ...

  4. net 预览文件 转换文件

    预览SWF文件 swfobject.js  (google浏览器 会阻止 需设置) @{ ViewBag.Title = "PdfPreview"; Layout = " ...

  5. VMware装Linux系统全屏问题

    在VMware上出装Linux,有强迫症的患者总是无法接受它不能全屏的问题,当然网上也有该问题的解决方案,但是搜索出来的答案总是零零散散,让很多初学者望而却步!今天笔者根据自己的机遇总结一遍最完备的解 ...

  6. TFS2013 设置签出独占锁(转载)

    作者:晓菜鸟 出处:http://www.cnblogs.com/52XF/p/4239056.html 在使用TFS进行源代码管理的时候VS默认允许多个签出,但在团队开发中往往需要设置独占锁(排他锁 ...

  7. 【转载】图解MySQL MSI方式安装方法

    ********************************** 后来发现图片是百度的被封了.有空再换下吧. 一般百度经验这样的链接是不会失效的,大家可以百度查看. *************** ...

  8. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  9. SetupFactory7使用经验

    1.        exe默认产生快捷方式,可以点击去掉. 2.        默认英语,可与选汉语 3.        编码逻辑 安装程序复制完程序文件后,从编辑框中得到数据,并写ini文件 屏幕- ...

  10. OOM android

    1.[原创]Android 系统稳定性 - OOM(一) 2.[原创]Android 系统稳定性 - OOM(二) 3.Android内存泄露分析(MemoryAnalyzer工具)