<!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. 【spring源码分析】IOC容器初始化（三）

    前言:在[spring源码分析]IOC容器初始化(二)中已经得到了XML配置文件的Document实例,下面分析bean的注册过程. XmlBeanDefinitionReader#registerB ...

  2. Java 8 Stream介绍及使用1

    (原) stream的内容比较多,先简单看一下它的说明: A sequence of elements supporting sequential and parallel aggregate * o ...

  3. 在Winform系统界面中对进展阶段的动态展示和处理

    在我们做客户关系管理系统的Winform界面的时候,需要对进展阶段这个属性进行一个方便的动态切换和标记处理,如我们根据不同的进展阶段显示不同的相关信息,也可以随时保存当前的阶段信息.其实也是一个比较常 ...

  4. Python的生成器send()方法 & yield_from

    生成器对象是一个迭代器.但是它比迭代器对象多了一些方法,它们包括send方法,throw方法和close方法.这些方法,主要是用于外部与生成器对象的交互.本文先介绍send方法. send send方 ...

  5. 03-三层交换机的OSPF实验

    三层交换机的OSPF实验 1.OSPF介绍 开放式最短路径优先(英语:Open Shortest Path First,缩写为 OSPF)是对链路状态路由协议的一种实现,隶属内部网关协议(IGP),故 ...

  6. php密码对称encrypt加密

    /** * 对用户的密码进行加密 * @param $password * @param $encrypt //传入加密串,在修改密码时做认证 * @return array/password */ ...

  7. Linux操作系统的文件链接

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++标题:Linux操作系统的文件链接内容:文件链接时间:2019年 ...

  8. 一入OI深似海 1 —— 偶然遇见，命运选择

    记得还是三年级(还是四年级?人老了都忘了)吧, 那时候我还是个愣头青, 学校的编程班在每个班强制招人, 我就屁颠屁颠被赶去去上课了. 一开始的课完全听不懂, 导致没过多久我同班的人一个个走了, 我为了 ...

  9. Python进阶6---序列化与反序列化

    序列化与反序列化*** 为什么要序列化 ? 定义 pickle库 #序列化实例 import pickle lst = 'a b c'.split() with open('test.txt','wb ...

  10. 4月23日 MySQL学习-DDL

    今日学习的是DDL的操作(数据定义语言) create table teachers (id int,name varchar(50));//创建一个表 给了两个类型alter table stude ...