添加模糊效果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. 重入锁--ReentrantLock

    本部分主要参考<java并发编程艺术>一书相关内容,同时参考https://blog.csdn.net/zhilinboke/article/details/83104597,说的非常形象 ...

  2. TOJ 4119 Split Equally

    描述 Two companies cooperatively develop a project, but they don’t like working with one another. In o ...

  3. mysql 索引、查询优化

    查询计划Explain mysql查询过程中,如若想了解当前sql的执行计划,可以通过explain your_sql的方式查看,具体可以参考mysql官方解释:https://dev.mysql.c ...

  4. [shell基础]——echo命令

    echo命令:在shell中主要用于输出 1. -n     不换行的显示结果(默认是换行的) 2. -e " "  支持双引号中使用一些特殊字符 常用的特殊字符有 \a 发出警告 ...

  5. 【Linux相识相知】rpm包管理

    我们日常在使用Windows的时候,如果要安装某个软件,最简单的方法就是在程序包的官网直接下载软件包到本地,一般是以.exe或者.msi格式的文件,然后一直下一步下一步就能安装成功了,但是在使用lin ...

  6. 修改K3数据是简介方法

    如  及时库存里有个别产品库存没有库位  是*号的 这个时候  我们创建一个其他出库单,把这个没有库位的产品输入进去,库位随便写个 如002 保存,审核不了的  会提示负库存 去后台找到此单据号 修改 ...

  7. 使用ANY、Some或All关键字

    可以使用All或Any关键字修改引入子查询的比较运算符.Some是与Any等效的ISO标准,All要求Where表达式与子查询返回的每个值进行比较时都应满足比较条件,Any则要求Where表达式与子查 ...

  8. lua_nginx_module用例

    content_by_lua server { listen ; server_name lua.luckybing.top; location / { default_type 'text/plai ...

  9. 如何恢复sqlserver误删除的数据(摘)

    一.借助第三方工具 1.sqlserver2005: Log Explorer http://www.cnblogs.com/whitney/archive/2008/08/22/1273879.ht ...

  10. Sql Server 锁 排它锁 更新锁 共享锁

    引用别人的.有时间整体整理下. 引用地址:http://www.cnblogs.com/wenjl520/archive/2012/08/24/2654412.html 锁的概述 一. 为什么要引入锁 ...