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 ...
随机推荐
- centos7下使用mysql离线安装包安装mysql5.7
服务器环境: centos7 x64 需要安装mysql5.7+ 一.卸载CentOS7系统自带mariadb # 查看系统自带的Mariadb [root@CDH-141 ~]# rpm -qa|g ...
- 对Faster R-CNN的理解(1)
目标检测是一种基于目标几何和统计特征的图像分割,最新的进展一般是通过R-CNN(基于区域的卷积神经网络)来实现的,其中最重要的方法之一是Faster R-CNN. 1. 总体结构 Faster R-C ...
- jenkins获取git上的源码
jenkins获取git上的源码会遇到三种情况,我们在这里会分别介绍一下: 一.获取git上public(公有)的项目 只需配置仓库的URL即可 jenkins下使用git获取源码的配置方法 二.获取 ...
- PHPStrom激活方法
直接用浏览器打开 http://idea.lanyus.com/ 点击页面中的“获得注册码”, 然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串 如果提示红字体信息, ...
- 【C++】C++中的分离式编译
在C++中随着程序越来越复杂,我们希望把程序的各个部分分别储存在不同的文件中.C++支持的分离式编译(separate compilation)允许我们把程序分割到几个文件中去,每个文件独立编译. 头 ...
- Java基础（二）面向对象（上）
面向对象基础知识 面向对象是相对面向过程而言的 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象 面向对象是基于面向过程的 面向对象的特征: 封 ...
- HTML5+CSS3 效果网站集合
1.jquery插件库 HTML5制作3D樱花漫天飞舞 http://www.jq22.com/jquery-info3547 2.17素材网 http://www.17sucai.com/pi ...
- Cobalt Strike DNS通讯实例
一．域名设置 如果没有域名,可以参考另一篇博客,申请Freenom免费域名,并使用DNSPod解析 链接:https://www.cnblogs.com/ssooking/p/6364639.html ...
- 【iCore4 双核心板_uC/OS-II】例程十一：内存管理
一.实验说明: 应用程序在运行中为了某种特殊需要,经常需要临时获得一些内存空间.而作为比较完善的操作系统uC/OS-II,也具有动态分配内存的能力. uC/OS-II对内存进行两级管理:把连续内存分成 ...
- SAP PA Document List
RE-Real Estate 房地产 RE010-EN-Col95-Real Estate Processes in SAP ERP RE200-EN-Col95-Real Estate Manage ...