使用filter属性来设置模糊值

效果：

css样式：

<style type="text/css">

        .cover {

            width: 600px;

            height: 300px;

            position: relative;

            text-align: center;

            line-height: 300px;

            color: #fff;

            margin: 20px auto;

        }

        .cover::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 600px;

            height: 300px;

            background: transparent url(Images/picture/5.jpg) center center no-repeat;

            filter: blur(8px);

            z-index: -1;

            background-size: cover;

        }

    </style>

HTML结构：

<body>

    <div class="cover">

        <h2>背景模糊，文字清晰显示</h2>

    </div>

</body>

　　

css设置背景模糊的更多相关文章

  1. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  4. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

  5. 兼容性所有浏览器的透明CSS设置

    兼容所有浏览器的透明CSS设置: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  6. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  7. css设置水平垂直居中

    关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...

  8. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  9. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

随机推荐

  1. JavaScript的几种（原型）继承

    定义Foo,Bar 其中,Bar继承Foo a是Bar的实例,包含有Foo和Bar的函数和属性: function Foo(name) { this.name = name; } Foo.protot ...

  2. hibernate与Oracle

    今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...

  3. 数据结构：广义表的实现(Java)

    广义表的简单理解在这篇博文中:https://blog.csdn.net/lishanleilixin/article/details/87364496,在此不做赘述. Java实现广义表: pack ...

  4. 2016级算法期末模拟练习赛-C.AlvinZH的青春记忆II

    1084 AlvinZH的青春记忆II 思路 中等题,二分. 简化题意,一列数字,每秒会自动-1,特殊操作可以使一个数在1s内-k,问这些数都减至0需要多久. 答案肯定在[1,xMax]之间,采用二分 ...

  5. Mysql备份之Innobakcupex&Xtrabackup

                       一.innobackupex备份工具 基本选项 --compress:该选项表示压缩innodb数据文件的备份. --compress-threads:该选项表示 ...

  6. JDK源码分析（10） ConcurrentLinkedQueue

    概述 我们要实现一个线程安全的队列有两种实现方法一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把锁)或两个锁(入队和出队用不同的锁)等方式来实现,而非阻塞 ...

  7. Mac拷贝/复制文件夹路径快捷键

    快捷键:Option+Command+C 显示路径在Finder: defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES ...

  8. Mac下开机启动rc.common不生效的问题

    经过测试在10.12.6下/etc/rc.common不生效,原因是已经被launchd守护进程所取代,虽然保留着这个文件,但是基本是不起作用的. 如果要开机启动请直接使用launchd进行操作. 同 ...

  9. SpringBoot集成WebSocket【基于STOMP协议】进行点对点[一对一]和广播[一对多]实时推送

    原文详细地址,有点对点,还有广播的推送:https://blog.csdn.net/ouyzc/article/details/79884688 下面是自己处理的一些小bug 参考原文demo,结合工 ...

  10. eclipse中提示js或者JQuery代码

    当你在eclipse中的JSP中写JavaScript或者JQuery代码的时候,eclipse是不会自动提示的,所以你需要在eclipse中安装一下插件,该插件的名字叫:Spket IDE,它可以作 ...