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 ...
随机推荐
- 使用mkbootfs制作ramdisk根文件系统
span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror ...
- let's encrypt申请
let's encrypt申请 https://keelii.com/2016/06/12/free-https-cert-lets-encrypt-apply-install/ https://ww ...
- 【PMP】事业环境因素和组织过程资产
事业环境因素(EEFs) 事业环境因素(EEFs):是指组织不能控制的,将对项目产生影响.限制或指令作用的各种条件. ①组织内部的事业环境因素: 组织文化.结构和治理 设施和资源的地理分布 基础设施 ...
- 单片机成长之路（51基础篇） - 007 CH340CH341最全说明
比较全的CH340,CH341应用说明 CH340 以前用USB转串口时图方便一般也都是直接买现成的USB转串口模块,但是后面设计需要,不等不将CH340这个模块集成到电路板中,经过多次失败,终于得到 ...
- 【OpenFOAM案例】03 Docker安装OpenFOAM
"工欲善其事必先利其器",软件装不上,讲再多的使用技巧也是白搭.近期不少留言说OpenFOAM不容易安装,今天来谈谈如何在Linux下利用Docker安装OpenFOAM. Lin ...
- [C++]Qt程式异常崩溃处理技巧(Win)
文章转载来自 http://www.cnblogs.com/lcchuguo/p/5177715.html 作者 lcchuguo https://blog.csdn.net/baid ...
- 在github上搭建个人博客
1.平台注册账号,新建域名 github(源码托管服务站):https://github.com/到GitHub官网,注册自己的账号,填好用户名,密码,邮箱,并完成邮箱验证就可以啦!默认的域名是htt ...
- js对象与字符串的想到转换
js JSON.stringify(jsObj); 对象转字符串JSON.parse(str); 字符串转对象
- mui 浏览器一样自动缩放
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解决space-between最后一排问题
display:flex + justify-content: space-between 能够实现2端对齐的布局,这种布局在网页中很常见.不过这种布局方式有一个问题.举个例子,我们假设现在一排放4个 ...