转载地址：http://blog.csdn.net/ohehehou/article/details/51975539

需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。

原始代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .content {

            color: #ffffff;

            font-size: 40px;

        }

        .bg {

            background: url('1.jpg');

            background-repeat: no-repeat;

            background-position: center;

            background-size: cover;

            height:600px;

            text-align: center;

            line-height: 600px;

        }

    </style>

</head>

<body>

<div class="bg">

    <div class="content">我是内容</div>

</div>

</body>

</html>

原始效果：

解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style type="text/css">

        .content {

            color: #ffffff;

            font-size: 40px;

        }

        .bg {

            background: url('1.jpg');

            height:600px;

            text-align: center;

            line-height: 600px;

        }

        .bg-blur {

            float: left;

            width: 100%;

            background-repeat: no-repeat;

            background-position: center;

            background-size: cover;

            -webkit-filter: blur(15px);

            -moz-filter: blur(15px);

            -o-filter: blur(15px);

            -ms-filter: blur(15px);

            filter: blur(15px);

        }

        .content-front {

          position:absolute;

          left: 10px;

          right: 10px;

          height:600px;

          line-height: 600px;

          text-align: center;

        }

    </style>

</head>

<body>

    <div>

        <div class="bg bg-blur"></div>

        <div class="content content-front">我是内容</div>

    </div>

</div>

</body>

</html>

效果： 

 
 注：相似的效果可以通过以上的代码改进而来

css 背景图片虚化效果的更多相关文章

  1. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  2. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  3. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  4. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  5. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  6. 【转】链接伪类（:hover）CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  7. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  8. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  9. css背景图片位置：background的position（转）

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

随机推荐

  1. 尚未备份数据库 "***" 的日志尾部。如果该日志包含您不希望丢失的工作，请使用 BACKUP LOG WITH NORECOVERY 备份该日志。

    使用SQL Server 2005还原备份的数据库文件时出现的问题,如题. 前提:如果你有个数据库的.bak的备份文件. 右键点击 数据库任务-->还原-->数据库 1.还原的目标选择你要 ...

  2. Linux中的普通命令如何以管理员身份运行

    set uid, gid, sticky bit 权限 一个文件都有一个所有者, 表示该文件是谁创建的.同时, 该文件还有一个组编号, 表示该文件所属的组, 一般为文件所有者所属的组.如果是一个可执行 ...

  3. 命令 上传项目到git中

    点击Clone or dowload会出现一个地址,copy这个地址备用. 接下来就到本地操作了,首先右键你的项目,如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here, ...

  4. ionic BUILD FAILED

    BUILD FAILED Total time: 24.572 secs FAILURE: Build failed with an exception. What went wrong: Execu ...

  5. Git 将代码回到指定版本

    将代码回到hash为1fbcb7ea3b43df60c639875d2bb68e20b451059e的版本 git checkout 1fbcb7ea3b43df60c639875d2bb68e20b ...

  6. 最新的Delphi版本号对照

    The CompilerVersion constant identifies the internal version number of the Delphi compiler. It is de ...

  7. Native App开发 与Web App开发（原生与web开发优缺点）

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  8. 【C#】解析C#中管道流的使用

    目录结构: contents structure [+] 匿名管道(anonymous pipe) 命名管道(named pipe) 管道为进程间通信提供了一种可能.管道分为两种,一种是匿名管道,另一 ...

  9. OpenLayers4地图实例-功能齐全

    网址:http://api.rivermap.cn/openlayers4/map.min.html 标注 工具

  10. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...