使用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. 我永远喜欢我的偶像 KIKU

  2. The Annoying Bug

    log里看不出问题,直接客户端就disconnected. gdb 挂了也不会停住,继续跑得跟正常人似的 再连根本不正常的了. 硬件: a , 主板CPU更换过 b,USB3.0 软件: 无有更换,但 ...

  3. 在微信移动端input file拍照或从相册选择照片后会自动刷新页面退回到一开始网站进入的页面

    <input type="file" accept="image/*"/> 调用打开摄像头后,聚焦后拍照,点击确认,这时页面会出现刷新动作,然后回退 ...

  4. Q312 戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...

  5. 【Three.js】模型抗锯齿处理

    1.锯齿消除方法 three.js参考使用官方demo发现模型渲染有锯齿,这种情况在旋转视角时候就非常明显. 抗锯齿的方法,很简单,只需要配置render两个属性即可: renderer = new ...

  6. 【实战】Axis2后台Getshell

    实战遇到的情况---任意文件读取,读取/conf/axis2.xml内容,读取用户名和密码登录后台 当然弱口令也是屡试不爽的. 操作起来 1.上传cat.aar(链接:https://pan.baid ...

  7. (转载)Android xml资源文件中@、@android:type、@*、？、@+引用写法含义以及区别

    原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...

  8. Mac 10.12为打开终端增加快捷键（转）

    1.在实用工具中打开Automator.app 2.选择新建,然后选择服务 3.服务收到选择为没有输入 然后在左边侧栏中双击Run AppleScript(有些系统会显示运行 AppleScript) ...

  9. xampp使用技巧及问题汇总

    1)在win7上同时装有IIS 和 xampp1.8.2 ,会出现Apache启动时,提示80端口被占用的情况(一般是iis安装之后出现的常见情况). 情况1:  xampp 在启动时会检测Apach ...

  10. 角色用户权限RBAC

    关于角色.用户.权限的表设计,已经成为经典中的经典,到处都在用,这里只是收录一下: 角色表:{role_id,role_name} 用户表:{user_id,user_name} 权限表:{permi ...