<!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. OpenGL实例：几何变换

    OpenGL实例:几何变换 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多请查看:计算机图形学 1. 平移 #include <GL/glu ...

  2. 关于ES6的module的循环加载

    今天写js时,碰到了一个模块循环加载的错误,下面时例子: // testa.mjs import testb from './testb.mjs'; const {b} = testb; const ...

  3. 滴滴 CTO 架构师 业务 技术 战役 时间 赛跑 超前 设计

    滴滴打车CTO张博:生死战役,技术和时间赛跑-CSDN.NEThttps://www.csdn.net/article/2015-06-25/2825058-didi 滴滴出行首席架构师李令辉:业务的 ...

  4. mysql排序，同样的sql，mysql 每次查询结果顺序不一致

    某天项目中写了一句排序sql,但是发现每次执行的结果都不同,就是排序顺序不一样. select * from table_tmp order by printStatus asc,dealTime d ...

  5. [转帖]5G网速那么快，基站辐射会很大吗？

    5G网速那么快,基站辐射会很大吗? 鲜枣课堂 2019-04-20 21:19收藏55评论6社交通讯     题图来自东方IC,本文来自微信公众号:鲜枣课堂(ID:xzclasscom),作者:小枣君 ...

  6. Spring Boot 2.x 编写 RESTful API (二) 校验

    用Spring Boot编写RESTful API 学习笔记 约束规则对子类依旧有效 groups 参数 每个约束用注解都有一个 groups 参数 可接收多个 class 类型 (必须是接口) 不声 ...

  7. Msi中文件替换

    转自https://blog.csdn.net/davidhsing/article/details/9962377 ※说明:目前可以用于MSI编辑的软件很多,但是有些软件在保存时会在MSI文件中写入 ...

  8. React多层级表单

    因项目需要封装的组件,组件库使用的是Ant Design 用到了 Form组件 , 布局组件,表单控件 ,如果没有使用Ant Design,可以用rc-form代替,需要对组件中使用的表单控件和布局进 ...

  9. chainsql异常记录

  10. SPOJ DIVCNT2

    SPOJ DIVCNT2 题目大意: 求\(S2(n)=\sum_{i=1}^{n}\sigma_0{(i^2)}\) . 题解 我们可以先考虑括号里只有一个\(i\)的情况,这样,我们把\(i\)分 ...