<!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. Gitlab源码库里代码提交后，如何触发jenkins自动构建？

    版本库里代码提交后,如何触发jenkins自动构建?这是一个面试题,感觉自己回答的并不好,因为并没有用过这个功能,之前公司实际项目用的是svn版本管理,一般都用立刻构建,和定时任务构建(不管代码是否有 ...

  2. UEditor1.2.6.0在.net环境下使用

    UEditor1.2.6.0 1.百度百科词条 2.UEditor官方网站 [CKEditor+CKFinder的配置实用,可查看博主另一篇文章] 第一次接触UEditor还是在2011年的下半年里, ...

  3. scrapy CrawlSpider解析

    CrawlSpider继承自Spider, CrawlSpider主要用于有规则的url进行爬取. 先来说说它们的设计区别: SpiderSpider 类的设计原则是只爬取 start_urls 中的 ...

  4. 使用Swagger辅助开发Fabric Application的Web API

    前面的几篇博客,我们已经把Fabric环境搭建好了,也可以使用Go开发ChainCode了,那么我们在ChainCode开发完毕后,可以通过CLI来测试ChainCode的正确性,ChainCode开 ...

  5. 【原创】谈谈线上CPU100%排查套路

    引言 不知道在大家面试中,有没有遇到这个问题 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答! 高调版 对不起,我是做研发的,这个问 ...

  6. .NET方法无限传参数技术

    是否有这样的需求在创建函数时参数个数不固定,又不想使用重载,那么下面这个技术就比较适合. 相信你一定见过下面这的代码: ); Format 就是string的一个函数,第一个参数是固定的字符串类型,那 ...

  7. open-vm-tools与VMware Tools

    安装VMware Tools经常会出现兼容性不好,系统之间复制文件失灵,并且安装时提示建议使用open-vm-tools,于是放弃vmware-tools的安装,尝试使用open-vm-tools o ...

  8. centos关机与重启命令

    Linux centos重启命令: 1.reboot   普通重启 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户 ...

  9. 查看电脑系统参数（Windows）

    发现工作的电脑开了很多任务,都运行的很好,所以记录下来(以后买电脑可以参考一下) 一.硬件详情(i5第七代?) 硬盘信息(分有固态和机械硬盘): 固态硬盘直接给了系统使用: 二.体验指数(基本都达到了 ...

  10. MAC 的ideal 修改 项目名称

    在使用 ideal的时候 ,我拷贝了一个文件,想要修改项目的名称,改了qcs-regulation-hefei 但是 (1)我改了项目名称: (2)还改了 pom.xml 但是还是不行,来回切换不同的 ...