添加模糊效果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. Linux 后台运行程序 和切换至前台

    fg 将后台中的命令调至前台继续运行 jobs查看当前有多少在后台运行的命令 ctrl + z可以将一个正在前台执行的命令放到后台,并且暂停

  2. journalctl 中文手册

    版权声明 本文译者是一位开源理念的坚定支持者,所以本文虽然不是软件,但是遵照开源的精神发布. 无担保:本文译者不保证译文内容准确无误,亦不承担任何由于使用此文档所导致的损失. 自由使用:任何人都可以自 ...

  3. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  4. 详细讲解Android的网络通信（HttpUrlConnection和HttpClient）

    前言,Android的网络通信的方式有两种:使用Socket或者HTTP,今天这一篇我们详细讲解使用HTTP实现的网络通信,HTTP又包括两种方式编程方式: (1)HttpUrlConnection: ...

  5. [Activator-HelloAkka] Create our Actors

    So far we have defined our Actor and its messages. Now let's create an instance of this actor. In Ak ...

  6. 利用request、beautifulsoup、xml写多线程爬虫

    # -*- coding:UTF-8 -*- import requests,time from collections import OrderedDict import threading fro ...

  7. 网络连接和初始HTTP请求

    浏览器检索网页,先从URL开始,使用DNS确定IP地址,再用基于TCP和HTTP协议连接到服务器,请求相关的内容,得到相应,浏览器解析并呈现到屏幕上.服务器响应后,浏览器响应不会同时全部到达,会陆续到 ...

  8. 序列化json和protobuf大小比较

    使用protobuf序列化为二进制和json序列化字符串大小比较 代码demo package com.gxf.demo; import java.io.*; public class Ptotobu ...

  9. ef linq 查询某时间段内数据 踩的坑

    var now = DateTime.Now;var list =db.Jinbi_TypeLimit.Where(x => x.IsAvailable && x.JinbiTy ...

  10. Maven学习篇一：依赖了解

    1.依赖配置 <project> ... <dependencies> <dependency> <groupId>xx</groupId> ...