添加模糊效果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. gradle cache目录(.gradle)剖析

    https://zhuanlan.zhihu.com/p/26473930 gradle下载后会对文件路径进行修饰,本文给出反向解析,把文件路径修改为原始路径的办法. 之所以研究这个,本来的目的是为了 ...

  2. C#中if和#if区别

    if的作用是程序流控制,会直接编译.执行.#if是对编译器的指令,其作用是告诉编译器,有些语句行希望在条件满足时才编译. --------------------------------------- ...

  3. MVC参数自动装配

    在拿到一个类型的所有属性以及字段的描述信息后,就可以通过循环的方式,根据这些数据成员的名字去QueryString,Form,Session,Cookie读取所需的数据了. 就是遍历参数,然后用反射遍 ...

  4. 抓包来看ftp状态码

    1.quit退出 客户端输入退出命令: 退出的抓包数据交换过程: 2.用户登录,输入正确用户名和错误用户名都是返回331请求输入密码,这里不再将错误用户名的抓包数据交换过程截图. 数据交换过程: 服务 ...

  5. java多线程lock的使用

    看代码: package com.ming.thread.reentrantlock; import java.util.concurrent.locks.Lock; import java.util ...

  6. Nagios 利用NSClient++的check_nrpe方式使用自定义脚本监控windows

    分类 NsClient++来监控windows主机有三种方式:check_nt.check_nrpe.nsca.check_nt自带很多功能,但是扩展性差,check_nrpe可以通过执行自己定义的脚 ...

  7. bzoj 5303: [Haoi2018]反色游戏

    Description Solution 对于一个有偶数个黑点的连通块,只需要任意两两配对,并把配对点上的任一条路径取反,就可以变成全白了 如果存在奇数个黑点的连通块显然无解,判掉就可以了 如果有解, ...

  8. ArrayList  集合

    ArrayList       集合:很多数据的一个集合       数组:长度不可变.类型单一 集合的好处:长度可以任意改变  类型随便 集合长度都的问题   很多数据的集合数组类型不可变 长度单一 ...

  9. C# ADO.NET 面向对象

    ADO.NET跟面向对象的结合 把面向对象跟数据库连接用 在项目里面创建一个新的文件夹   名字为App_Code 在这个App_Code里面创建几个类 主要为拆分问题,标上序号,先干什么在干什么 实 ...

  10. 关闭Windows 系统当前连接的Wifi以及判断物理\虚拟网卡,有线\无线网卡

    1.关闭wifi ,调用Api [DllImport("Wlanapi.dll", SetLastError = true)] public static extern uint ...