添加模糊效果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使用sys登录时报错ORA-28009解决方法

    情况一:使用sqlplus登录: 正常输入用户名的口令,就会报错,因为SYS是在数据库之外的超级管理员,所以我们在登录的时候 要在输入口令:口令+as sysdba(比如:123456 as sysd ...

  2. Ubuntu 14.04 下安装搜狗输入法,不要删除ibus

    今天安装了 sougou输入法.在ubuntu下面,然后网上一般的帖子都是要求你先删除 ibus 但是你删除了ibus之后,就会导系统设置被删除很多设置项,甚至无法打开, 所有你设置ubuntu输入法 ...

  3. Coursera 机器学习 第9章（下） Recommender Systems 学习笔记

    9.5 Predicting Movie Ratings9.5.1 Problem Formulation推荐系统.推荐系统的问题表述:电影推荐.根据用户对已看过电影的打分来推测用户对其未打分的电影将 ...

  4. pat1007. Maximum Subsequence Sum (25)

    1007. Maximum Subsequence Sum (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...

  5. SpringBoot 之 打war包

    1.修改打包方式为 war <packaging>war</packaging> 2. 修改tomcat 依赖 <dependency> <groupId&g ...

  6. topN问题

    topN问题:给出一个数组,找出前N个最大的元素. topN问题可以用分治法解决,这个问题与快速排序类似,快速排序是用一个数对数组进行划分,topN问题则不需完成排序,只需划分出前n个最大的数字即可. ...

  7. 深入理解JavaScript系列（36）：设计模式之中介者模式

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...

  8. Java简单验证码原理(源代码+步骤操作)

    本文章一共分为五个步骤,具体操作流程如下: 一.新建名为:CheckCodeServlet的servlet类; 二.复制以下代码到新建的CheckCodeServlet类中,修改自己的包名: pack ...

  9. continue break return

    ontinue: 可以让程序跳过,continue关键字之后的语句,回到while循环的第一行命令 break: 让程序完全跳出循环,结束while循环的执行 return: 从查询或过程中无条件退出 ...

  10. Java基础入门 - 简介

    官网:https://www.oracle.com Java分为三个体系: JavaEE: Java Platform, Enterprise Edition, Java平台企业版 JavaSE: J ...