使用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. mxonline实战9，我要学习功能块，机构详情展示，收藏功能

    对应github地址:第9天   一. 实现我要学习功能

  2. PrefixLength的计算

    直接用android4.2.2的源码来说话: \frameworks\base\services\java\com\android\server\NetworkManagementService.ja ...

  3. python-requests库的使用之爬取贴吧内容并保存在本地

    以面向对象的程序设计方式,编写爬虫代码爬去‘李毅吧’所有页面的内容,也可以通过改变对象的参数来爬取其它贴吧页面的内容. 所用到的库为:requests 涉及知识点:python面向对象编程,字符串操作 ...

  4. C#-WebForm-★★★JQuery知识——DOM操作★★★

    例如: $("#btn1").attr( "disabled" , "disabled" ); 例如: $("#d1") ...

  5. Web服务器与浏览器的实现原理

    Web服务器与浏览器的实现原理 第一部分 为什么会出现web程序? 单机程序不能共享功能的特性导致了客户机服务器模式的诞生  有一台服务器有特定功能的程序 其他计算机通过客户端程序与服务器交流间接使用 ...

  6. [Alpha]团队任务拆解

    要求 团队任务拆解 Alpha阶段总体规划 初步实现测试.报告: 实现对游戏最基本的测试,包括内置随机测试.提供可供选择的组合测试 实现对游戏测试时操作的记录并最终生成报告 能够在发现异常时及时将异常 ...

  7. Servlet+JSP+JDBC设计实现图书系统——管理功能实现

    写在前面,之前由于种种原因博客好久没有更新.最近打算重拾JavaWeb,所以从头开始,先用servlet+jdbc+bootstrap最基础的代码实现一个图书系统.考虑有管理员端+用户端,项目完成后会 ...

  8. Compile git version inside go binary

    Compile git version inside go binary Abstract 在我们编写的程序中总是希望可以直接查阅程序的版本,通过--version参数就会输出如下版本信息. Buil ...

  9. (转)Heartbeat+DRBD+MySQL高可用方案

    原文:http://www.cnblogs.com/gomysql/p/3674030.html 1.方案简介 本方案采用Heartbeat双机热备软件来保证数据库的高稳定性和连续性,数据的一致性由D ...

  10. python_SMTP and POP3

    #!/usr/bin/python #coding=utf-8 #发送邮件 import smtplib from smtplib import SMTP as smtp import getpass ...