<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>高斯模糊背景</title>

    <style>

        .bg{

            background-image:url(../images/1.jpg);

            width:100%;

            height:750px;

            line-height:750px;

        }

        .bg-blur{

            float:left;

            background-position:center;

            background-repeat:no-repeat;

            background-size:cover;

            -webkit-filter: blur(9px);

            -moz-filter: blur(9px);

            -o-filter: blur(9px);

            -ms-filter: blur(9px);

            filter:blur(9px);

        }

        .content{

            font-size:50px;

            color:#555;

            font-weight:bold;

        }

        .font-content{

            position:absolute;

            width:700px;

            height:700px;

            margin:20px;

            text-align:center;

            line-height:700px;

            left:50%;

            top:50%;

            transform: translate3d(-50%,-50%,0);

            /* border:2px solid red; */

        }

    </style>

</head>

<body>

<div>

    <div class="bg bg-blur"></div>

    <div class="content font-content">今天是植树节，你植树了吗？</div>

</div>

</body>

</html>

效果如下：

css实现背景模糊，但不影响背景上的内容的更多相关文章

  1. css实现遮罩层(解决透明背景上的文字不透明)

    .PopUp_layer{   position:fixed;   top: 0;   left: 0;   right:0;   bottom:0;   width:100%;   height:1 ...

  2. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  3. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  4. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  5. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  6. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  7. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  8. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  9. 【原】fiddler修改线上的内容

    摘要:当我们线上的代码出bug了,咋办呢?有时候本地的代码跟线上的代码还是运行环境还是有区别的.比如有些封装的方法需要运动到手机上可以调试,而浏览器是无法调试的.如果不想每次修改完再放上到测试环境看效 ...

随机推荐

  1. June 28th. 2018, Week 26th. Thursday

    You cannot change the circumstances but you can change yourself. 既然改变不了环境,那就改变自己. From Jim Rohn. Rec ...

  2. UOJ #269. 【清华集训2016】如何优雅地求和

    UOJ #269. [清华集训2016]如何优雅地求和 题目链接 给定一个\(m\)次多项式\(f(x)\)的\(m+1\)个点值:\(f(0)\)到\(f(m)\). 然后求: \[ Q(f,n,x ...

  3. 《JAVA程序设计》_第七周学习总结

    一.学习内容 1.String类--8,1知识 Java专门提供了用来处理字符序列的String类.String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使 ...

  4. Linux：Day18(下) Bind9

    子域授权:每个域的名称服务器,都是通过其上级名称服务器在解析库中进行授权. 类似根域授权tld: .com IN NS ns1.com. .com IN NS ns1.com. ns1.com IN ...

  5. Python函数的装饰器修复技术（@wraps）

    @wraps 函数的装饰器修复技术,可使被装饰的函数在增加了新功能的前提下,不改变原函数名称,还继续使用原函数的注释内容: 方便了上下文环境中不去更改原来使用的函数地方的函数名: 使用方法: from ...

  6. fullcalendar日历插件的使用并动态增删改查

    我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

  7. Vue 部署IIS 单页面刷新报404问题

    参考地址: https://blog.csdn.net/yinjing8435/article/details/71274416

  8. VUE中使用geetest滑动验证码

    一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...

  9. Linux(Ubunt)使用日记------常用软件汇总(不定时更新)

    整理总结日常Ubuntu中使用的一些软件,事实证明使用Linux真的会让人的欲望变小有个能用的就不错啦,不要调三捡四 解压类 Unzip | unzip -O CP936 files Unrar ra ...

  10. List根据对象的两个字段进行排序，并且有一个倒序

    用java8 的lambda 表达式 list.sort(Comparator.comparing(Live::getId) .thenComparing(Live::getAppId, Compar ...