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>

效果: 

 注:相似的效果可以通过以上的代码改进而来

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的碎碎念

FlexSlider图片轮播插件的使用

Flexslider是一款基于的jQuery内容滚动插件,不用自己写轮播图的代码,现在可以直接使用这个插件。 ? 首先在页面head部位载入jquery库文件和...

55170
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

68160
来自专栏静默虚空的博客

HTML 基础

HTML 基础 本章展示最常用的 HTML 标签。 标题 标题很重要 请确保标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。 搜索引擎...

462100
来自专栏Python小屋

Python以字符形式打印双色图片中的文字

本文代码功能:假设有一白色背景的图片内含非白色姓名,代码读取图片像素信息,用很多星号来打印该姓名。 from PIL import Image def prin...

26940
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

27060
来自专栏非著名程序员

Android学习第六弹之 Android字体大小自适应不同分辨率的方法

Android字体大小自适应不同分辨率 非著名程序员 今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适...

211100
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

25460
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

205100
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

12420
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

64830

扫码关注云+社区

领取腾讯云代金券