css 背景图片虚化效果
转载地址：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 背景图片虚化效果的更多相关文章
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【转】链接伪类（:hover）CSS背景图片有闪动BUG
来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- css背景图片拉伸
css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...
- css背景图片位置：background的position（转）
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
随机推荐
- 什么是crf
什么是crf 利用crf++进行实体识别的流程 确定标签体系: 确定特征模板文件: 处理训练数据文件: 模型训练. 确定标签体系 大部分情况下,标签体系越复杂准确度也越高,但相应的训练时间也会增加.因 ...
- AttributeError: 'dict' object has no attribute 'has_key'
运行下面的代码: if (locals().has_key('data')): del data gc.collect() 出错: if (locals().has_key('data')): Att ...
- python 过滤文本中的标点符号（转）
网上搜到的大都太复杂,最后找到一个用正则表达式实现的: import re s = "string. With. Punctuation?" # 如果空白符也需要过滤,使用 r'[ ...
- cpu使用过高的一次处理方法
1.top查看使用情况 2.查看mysql里的线程,观察是否有长期运行或阻塞的sql: show full processlist 原因找到,处理方法,添加索引,搞定
- Swift Struct 结构体
前言 Swift 语言有两种基本的数据类型,即类(class)和结构体(struct),class 这样的概念大家不会陌生,而 struct 也并不是什么新的概念,在 Objective-C 和 C ...
- Spark 官方博文专区（目录）
关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...
- What’s new for Spark SQL in Apache Spark 1.3（中英双语）
文章标题 What’s new for Spark SQL in Apache Spark 1.3 作者介绍 Michael Armbrust 文章正文 The Apache Spark 1.3 re ...
- [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存
sql server 统计出来的内存,不管是这个,还是dbcc memorystatus,和进程管理器中内存差距很大,差不多有70G的差异. 具体原因不止,可能是内存泄漏,目前只能通过重启服务解决 ...
- EntityFramework安装失败
PM> Install-Package EntityFramework正在尝试收集与目标为“.NETFramework,Version=v4.0”的项目“ConsoleApplication1” ...
- docker容器运行与退出
#下载centos镜像,运行一个名为mycentos的容器,并在容器里运行/bin/bash docker run -ti --name mycentos centos /bin/bash #退出 e ...