使用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. v-bind、v-on 的缩写

    Vue中的缩写:v-bind.v-on v-bind 缩写:: 预期:any (with argument) | Object (without argument) 参数:attrOrProp (op ...

  2. 剑指offer——面试题26：判断二叉树B是否为二叉树A的子结构

    #include"iostream" #include"stdio.h" #include"math.h" using namespace ...

  3. Html5与本地App资料整理分析

    最近开发了一个小的手机网站,重新了解了本地应用,html5,混合应用,webApp等概念,整理下相关的资料,略带自己的思考 用户固有的使用习惯 在<2012年度 HTML5状况及发展形势报告.p ...

  4. DB2 体系结构 （进程模型）

    DB2 是众多关系型数据库中的一种, 关系型数据库还包括比较火的Oracle,MySQL 实例 数据库 DB2 进程模型 DB2 通过 db2start 命令启动数据库实例,即启动相应的进程和线程,并 ...

  5. MD5 工具类

    package com.payease.chains.risk.utils; /** * md5密码加密工具类 * Created by liuxiaoming on 2017/8/28. */ pu ...

  6. IO流（二）字符流

    1.字符流:在字节流的基础上添加了编码机制.很大程度上和字节流操作一样的,字符流只能操作文本类文件,准确的说应该是纯文本类文件.例如.txt,.java,.cpp,.html等 编码:每一个国家都有自 ...

  7. Python2.7环境下安装pydbg

    From:http://blog.csdn.net/cheng_tian/article/details/7652058 最近在看<Python灰帽子:黑客与逆向工程师的Python编程之道&g ...

  8. python-cgi-demo

    简单的Python CGI 在linux平台实现注意:路径是以当前路径为根目录 ,Python文件一般放在/cgi-bin/目录下在linux命令行运行:python  -m  CGIHTTPServ ...

  9. Jenkins 中创建项目时没有Maven项目怎么办

    如果在创建项目时候,没有“创建一个Maven 项目”的选项. 你需要安装Maven项目插件:Maven Integration plugin . 点击“可选插件”  然后在右边的过滤输入框中输入搜索关 ...

  10. 10种jquery选择器操作详解（转）

    jquery选择器大体上可分为4 类: 1.基本选择器2.层次选择器3.过滤选择器4.表单选择器 其中过滤选择器可以分为:1.简单过滤选择器2.内容过滤选择器3.可见性过滤选择器4.属性过滤选择器5. ...