<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        img {

            width: 300px;

            height: 300px;

        }

        .blur {

            filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

            -webkit-filter: blur(10px); /* Chrome, Opera */

               -moz-filter: blur(10px);

                -ms-filter: blur(10px);

                    filter: blur(10px);

            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

        }

    </style>

</head>

<body>

    <img src="lpt-vue/src/assets/logo.png" />

    <img src="lpt-vue/src/assets/logo.png" class="blur" />

</body>

</html>

图片是我本地的图片，建议换掉图片

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中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  4. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  5. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  6. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  7. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  8. css设置背景图片，ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  9. （转）background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

随机推荐

  1. Codeforces #55D-Beautiful numbers （数位dp）

    D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  2. bzoj千题计划189：bzoj1867: [Noi1999]钉子和小球

    http://www.lydsy.com/JudgeOnline/problem.php?id=1867 dp[i][j] 落到(i,j)的方案数 dp[i][j]=0.5*dp[i-1][j]   ...

  3. PHP 文件加密Zend Guard Loader 学习和使用（如何安装ioncube扩展对PHP代码加密）

    一.大体流程图 二.PHP 项目文件加密 下表列出了Zend产品中的PHP版本及其内部API版本和Zend产品版本. 如何加密请往后看 三.如何使用 第一步:确认当前环境 Amai Phalcon 前 ...

  4. ActiveMQ Transport Connectors

    一,介绍 ActiveMQ的Transport Connectors 是什么? ActiveMQ是一个消息服务器.作为消息服务器,就会有生产者和消费者来使用它.生产者将消息发送给ActiveMQ,消费 ...

  5. 获取SQL Server数据库中的表和字段描述

    获取所有dbo表的扩展属性: SELECT * FROM fn_listextendedproperty (NULL, 'schema', 'dbo', 'table', default, NULL, ...

  6. python 入门基础23 选课系统 项目

    选课系统 代码地址:github_code # 选课系统 # 角色:学校.学员.课程.讲师 # 要求: # 1. 创建北京.上海 2 所学校 # 2. 创建linux , python , go 3个 ...

  7. sort命令的k选项大讨论【转】

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

  8. .NET C#错误：所生成项目的处理器框架“MSIL”与引用“wdapi_dotnet1021”的处理器架构“AMD64”不匹配

    .NET C#错误:所生成项目的处理器框架“MSIL”与引用“wdapi_dotnet1021”的处理器架构“AMD64”不匹配. 直接在项目右键属性->生成->x64. 即可解决

  9. redis 配置文件翻译

    2014年6月24日 17:29:11 include  如果有其它配置文件,可以使用 include 指令 ####通用配置 daemonize  默认的redis不会以守护进程运行,需要这样的话可 ...

  10. 巧用PHP数组函数

    2014年3月5日 08:48:39 情景:项目中需要根据传递来的参数的不同,使用不同的缓存 假如传递来的参数最多有这几个(在这个范围内,但是每次传过来的参数不确定): $arg = array( ' ...