添加模糊效果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. oracle 基础知识(三)--SCN

    一,SCN的介绍     SCN(System Change Number),也就是通常所说的系统改变号或者系统提交号,是数据库中非常重要的一个数据结构. SCN用以标识数据库在某个确切时刻提交的版本 ...

  2. 计算机网络相关知识（http状态码 && 首部字段）

    计算机网络相关知识 计算机网络的知识还是非常重要的, 这里做一个简单的总结. 推荐阅读文章:http://www.cnblogs.com/TankXiao/archive/2012/02/13/234 ...

  3. 3d旋转卡牌

    做成向中心缩放就行了,和旋转效果一样的

  4. centOS使用.htaccess

    首先,你要保证你的Aapche已经开启了.htaccess 可以参考:http://www.veryhuo.com/a/view/21259.html 以下是.htaccess文件中的内容: Rewr ...

  5. CVE-2018-7600-Drupal远程代码执行漏洞-Render API

    今天学习一下Drupal的另一个漏洞,由于渲染数组不当造成的漏洞 poc: url:http://localhost/drupal-8.5.0/user/register?element_parent ...

  6. python的元组及其书写规矩

    1.元组 (1)元组看起来犹如列表,但使用圆括号而不是方括号来标识.定义元组后,就可以使用索引来访问其元素,就像访问列表元素一样. (2)元组的元素不可修改,但是可以赋值. 2.规矩 (1)缩进:建议 ...

  7. 重构指南 - 引入参数对象（Introduce Parameter Object）

    当一个方法的参数超过3个以上,就可以考虑将参数封装成一个对象.将参数封装成对象后提高了代码的可读性,并且该参数对象也可以供多个方法调用,以后如果增加删除参数,方法本身不需要修改,只需要修改参数对象就可 ...

  8. 正则表达式验证问题（用户名、密码、email、身份证

    实现的代码如下: <html> <head> <meta charset="UTF-8"> </head> <body> ...

  9. csharp:汉字转带拼音声调

                                                                                      {                  ...

  10. CSS3媒体查询总结

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