转载地址：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. 【Boost】boost::string_algo详解2——find相关函数

    来自: https://blog.csdn.net/huang_xw/article/details/8276123 函数声明:   template<typename Range1T, typ ...

  2. 微信小程序WebSocket报错：Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  3. iOS https请求 NSURLSessionDataTask

    // //  YKSHttpsRequest.m //  YKShareSdkDemo // //  Created by qingyun on 22/05/2017. //  Copyright © ...

  4. Deep Learning.ai学习笔记_第五门课_序列模型

    目录 第一周 循环序列模型 第二周 自然语言处理与词嵌入 第三周 序列模型和注意力机制 第一周 循环序列模型 在进行语音识别时,给定一个输入音频片段X,并要求输出对应的文字记录Y,这个例子中输入和输出 ...

  5. linux性能压测工具

    http://benjr.tw/532 http://blog.yufeng.info/archives/2023 https://www.cnblogs.com/zhoujinyi/archive/ ...

  6. Git diff结果显示分析

    1.diff的三种格式: 正常格式(normal diff) 上下文格式(context diff) 合并格式(unified diff) 2.示例文件为了便于讲解,先新建两个示例文件.第一个文件叫做 ...

  7. java 获取当天（今日）零点零分零秒

    两种方法 一种得到的是时间戳,一种得到是日期格式: 1.日期格式的 Calendar calendar = Calendar.getInstance(); calendar.setTime(new D ...

  8. react-native init的时候出现问题:npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was

    react-native init的时候出现问题:npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was ...

  9. Linux下源码安装xz的方法

    xz是一个不太常见但又效率非常高的解压缩软件,安装方法如下 ,cd /usr/local/src ,wget https://tukaani.org/xz/xz-5.2.3.tar.gz //下载到/ ...

  10. Python 简单入门指北(二)

    Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...