<!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. 任意N个不同数的逆序对平均值

    在学习数据结构的时候看到了以下定理: 但是老师并没有解释,本着钻研的精神决定搞清楚为什么是这个数. 在百度 google一番之后并没有找到,决定自己试着证明. 最开始走了一些弯路,但突然灵光一闪很容易 ...

  2. socket.io 出现的WebSocket is closed before the connection is established

    WebSocket is closed before the connection is established 最近socket.io是挺流行的,幼麟棋牌和一些好的开源项目也使用这个框架,在搭建其平 ...

  3. Storm入门（一）原理介绍

    问题导读:1.hadoop有master与slave,Storm与之对应的节点是什么?2.Storm控制节点上面运行一个后台程序被称之为什么?3.Supervisor的作用是什么?4.Topology ...

  4. PLSQL Developer图形化界面新建用户并授权并导入脚本

    最近用了PLSQL Developer第三方的软件.记录一下实现新建用户并授权并导入脚本的功能. 第一步.切换sys用户(如果此处方法已经掌握,直接切换sys即可,就不用看这一步了) 首先检查当前登录 ...

  5. C# 图片文件与字符串之间的转换

    1.将图片文件转化为字符串类型 2.将字符串类型的图片数据转换为本地图片保存

  6. 【P2577】 午餐

    题目简述 THU ACM小组一行N个人去食堂吃饭,计划是这样的:先把所有的人分成两队,并安排好每队中各人的排列顺序,然后一号队伍到一号窗口去排队打饭,二号队伍到二号窗口去排队打饭.每个人打完饭后立刻开 ...

  7. QTableWidgetItem class

    Help on class QTableWidgetItem in module PyQt5.QtWidgets: class QTableWidgetItem(sip.wrapper)  |  QT ...

  8. FineUICore（基础版）v5.4.0已发布！

    FineUICore(基础版)已发布,请先加入知识星球,下载后可以永久免费商用:

  9. UML在代码中的展现

    依赖:一个类使用了另外一个类,这种关系是临时的.脆弱的. 如人需要过河,需要船,这时人.过河(船)  中船被当做参数传入,船的实现变化会影响过河方法.     聚合:体现是整体与部分.has-a的关系 ...

  10. scala的多种集合的使用(4)之列表List(ListBuffer)的操作

    1.List列表的创建和添加元素 1)最常见的创建list的方式之一. scala> val list = 1 :: 2 :: 3 :: Nil list: List[Int] = List(1 ...