css 设置背景图片模糊，内容不模糊
需求：一个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 设置背景图片模糊，内容不模糊的更多相关文章
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
- css设置背景图片，ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- （转）background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- css 设置背景图片透明
最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
- css设置背景图片
background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...
- css 设置背景图片铺满固定不动
#page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- 高性能javascript（记录二）
js中有四种基本的数据存取位置.分别是:字面量.本地变量.数组元素.对象成员. 字面量:只代表自身,不存储在特定位置.js的字面量有:字符串.数字.布尔值.对象.数组.函数.正则表达式.以及特殊的nu ...
- ros语音交互（四）移植科大讯飞语音识别到ros
将以前下载的的语音包的 samples/iat_record/的iat_record.c speech_recognizer.c speech_recognizer.c 拷贝到工程src中, linu ...
- JQuery设置时间段下拉选择 时间下拉选择
$(document).ready(function() { var arrT = []; var tt = "{0}:{1}"; for (var i = 0; i < 2 ...
- map 取值
1>可以取出Map中所有的键所在的Set集合:再通过Set的迭代器获取到每一个键,之后再用get();方法获得对应的值. public static void main(String[] arg ...
- ArcEngine拓扑
空间拓扑描述的是自然界地理对象的空间位置关系-相邻,重合,连通等,是地理对象空间属性的一部分.目前ESRI提供的数据存储方式中,Coverage和GeoDatabase能够建立拓扑,Shape格式的数 ...
- 第二篇.Bootstrap起步
第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...
- windows平台下安装、编译、使用mongodb C++ driver
本博客将记录在Win8.1 ,VS2013环境下编译.配置mongodb C++ driver的流程. 1.下载预备 下载Boost:http://sourceforge.net/projects/b ...
- 张小龙微信小程序演讲内容简介
1月9号,看看实际上如何
- oracle 归档日志
归档日志(Archive Log)是非活动的重做日志备份.通过使用归档日志,可以保留所有重做历史记录,当数据库处于ARCHIVELOG模式并进行日志切换式,后台进程ARCH会将重做日志的内容保存到归档 ...
- 适合PHP学习者的学习路线 10个PHP优化技巧
适合PHP学习者的学习路线: (1) 熟悉HTML/CSS/JS..网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉 (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法 (3) ...