需求：一个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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

原始效果：

解决方法：内容和图片分别置于一个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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

效果：

css 设置背景图片模糊，内容不模糊的更多相关文章

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  3. css设置背景图片，ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  4. （转）background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

  5. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  6. css 设置背景图片透明

    最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

  7. css设置背景图片

    background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...

  8. css 设置背景图片铺满固定不动

    #page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  2. Python3学习（一）-基础、数据类型、变量、字符串和编码、list&tuple、if、for、while、dict、set、函数与参数

    ##廖雪峰py3笔记 ## '//'这是获得相除后的整数部分 ##a = 10//3 ##print (a) ## '/'获得相除后的结果,为浮点数,结果能整除也也是浮点数 ##b = 10/3 ## ...

  3. Tomcat批处理文件小结

    Tomcat批处理文件小结 一:嗯,如果你不了解Windows批处理文件,并且想了解一下,请先参看下面的链接资源(我也是因为想了解一下Windows批处理文件是用什么写的?怎么写的?才在园中找的,下面 ...

  4. HBase 实战(2)--时间序列检索和面检索的应用场景实战

    前言: 作为Hadoop生态系统中重要的一员, HBase作为分布式列式存储, 在线实时处理的特性, 备受瞩目, 将来能在很多应用场景, 取代传统关系型数据库的江湖地位. 本篇主要讲述面向时间序列/面 ...

  5. iOS架构师之路：控制器（View Controller）瘦身设计

    前言 古老的MVC架构是容易被iOS开发者理解和接受的设计模式,但是由于iOS开发的项目功能越来越负责庞大,项目代码也随之不断壮大,MVC的模糊定义导致我们的业务开发工程师很容易把大量的代码写到视图控 ...

  6. Python的平凡之路（21）

    上节内容回顾:1.请求周期url> 路由 > 函数或类 > 返回字符串或者模板语言?Form表单提交:    提交 -> url > 函数或类中的方法     - ... ...

  7. LCD相关知识点

    1.LCD即液晶显示器,控制原理是控制其中的电子枪,在n行*n列的屏幕上投射不同颜色从而形成图像 2.编程步骤: ①打开LCD背光将LCD背光对应的GPIO设置为禁止上拉(GPxUP相应位写入1),选 ...

  8. ARM9的中断控制器

    简要复习一下ARM9中断控制器的控制过程: 1.首先能识别触发的中断(对应中断源必须打开,然后查询当前中断状态寄存器),硬件会操控PC跳到中断向量入口(IRQ_HANDLE,硬件控制的只要是IRQ中断 ...

  9. 安卓--界面--改变image view

    switch (v.getId()) { case R.id.button: imageView.setImageResource(R.drawable.jelly_bean); break; def ...

  10. centos7下安装mantis

    1.环境配置 Web Server:Apache,The web server must support PHP. 数据库:MySQL (or one of its forks, e.g. Maria ...