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

原始代码：

  1. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         .content {
  8.             color: #ffffff;
  9.             font-size: 40px;
  10.         }
  11.         .bg {
  12.             background: url('1.jpg');
  13.             background-repeat: no-repeat;
  14.             background-position: center;
  15.             background-size: cover;
  16.             height:600px;
  17.             text-align: center;
  18.             line-height: 600px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="bg">
  24.     <div class="content">我是内容</div>
  25. </div>
  26. </body>
  27. </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代码：

  1. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         .content {
  8.             color: #ffffff;
  9.             font-size: 40px;
  10.         }
  11.         .bg {
  12.             background: url('1.jpg');
  13.             height:600px;
  14.             text-align: center;
  15.             line-height: 600px;
  16.         }
  17.         .bg-blur {
  18.             float: left;
  19.             width: 100%;
  20.             background-repeat: no-repeat;
  21.             background-position: center;
  22.             background-size: cover;
  23.             -webkit-filter: blur(15px);
  24.             -moz-filter: blur(15px);
  25.             -o-filter: blur(15px);
  26.             -ms-filter: blur(15px);
  27.             filter: blur(15px);
  28.         }
  29.         .content-front {
  30.           position:absolute;
  31.           left: 10px;
  32.           right: 10px;
  33.           height:600px;
  34.           line-height: 600px;
  35.           text-align: center;
  36.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div>
  42.         <div class="bg bg-blur"></div>
  43.         <div class="content content-front">我是内容</div>
  44.     </div>
  45. </div>
  46. </body>
  47. </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. 关于StatusStrip控件和StatusBar控件的小试

    今天,在网上查找资料,突然看到一个例子,但例子中提及的StatusBar控件,我发现在vs控件压根不存在,我就郁闷了,于是上网查找才知道,现在这个控件已经被StatusStrip控件给吞了,Statu ...

  2. ionic开发中的各种坑

    提前说明:这些坑是ionic1的. 一.关于缓存:<ion-view>中设置cache-view="false"表示禁用缓存,默认为true; 二.列表进入详情页面后返 ...

  3. codeforces 501 C,D,E

    C题意: 给定n个点(标号0~n-1)的度数(就是与其邻接的点的个数)和所有与它邻接的点标号的异或和,求满足这些条件的树的边应该是怎么连的,将边输出出来 这里可以理解成拓扑排序的方式考虑,当i度数为1 ...

  4. 如何将两个json合并成一个

    //调用方法: var targetObject = [{name:"11",age:11}]; var sourceObject = [{name:"22", ...

  5. VisualSVN 4.0.12补丁原创发布

    VisualSVN 4.0.12补丁原创发布

  6. C++与Java的语法区别

    C++与Java的语法区别 首先,两个大的不同是主函数和怎样编译的不同,接下来是许多小的区别. main 函数C++//自由浮动的函数int main( int argc, char* argv[]) ...

  7. JavaScript封装

    js封装就是把使用方式简单化,内部逻辑和使用解耦.使用人员知道参数和返回值就可以了,其他不用使用人员设置. 封装就是将属性,方法,字段等封装成类. JavaScript封装方法 1,函数方式 func ...

  8. cocos2d-x图层相关 锚点

    CCLayerColor* ccc = CCLayerColor::create(ccc4(255,0,0,255)); ccc->setContentSize(CCSize(200,200)) ...

  9. iOS保存cookie的方法

    SURLRequest*request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.google.com/ ...

  10. Java并发编程学习笔记（一）——线程安全性

    主要概念:线程安全性.原子性.原子变量.原子操作.竟态条件.复合操作.加锁机制.重入.活跃性与性能. 1.当多个线程访问某个状态变量并且其中有一个线程执行写入操作时,必须采用同步机制来协同这些线程对变 ...