<!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. 略显犀利的 js 判断闰年

    /** * 判断闰年函数 * @param {number} year 要判断的年份 * @return {bool} 返回布尔值 * * 其实只要满足下面几个条件即可. * 1.普通年能被4整除且不 ...

  2. JavaScript的单线程性质以及定时器的工作原理

    前些日子还在网上争论过js动画用setTimeout还是setInterval,个人偏向于setTimeout,当动画中牵扯到ajax时用setInterval会有时间偏差,出现一些问题即使用clea ...

  3. 【webService客户端】webservice客户端工具

    public static Object invokeWebService(String namespaces,String url, String method, Object[] params, ...

  4. perl6: Proc::Async (new)

    # command with arguments my $proc = Proc::Async.new('whoami'); # subscribe to new output from out an ...

  5. 详细到没朋友，一文帮你理清Linux 用户与用户组关系~

    引用自:https://mp.weixin.qq.com/s/Fl8ZjaUQuLDx7jbgM-1T5w 1.用户和用户组文件 在 linux 中,用户帐号,用户密码,用户组信息和用户组密码均是存放 ...

  6. VS 2013 中如何自定义快捷键（图解）

    随着软件的升级其功能也越来越多,所以相应的快捷键也多了起来.VS2013中的快捷方式已经发展为了两个快捷键的组合.例如VS2013中默认的多行注释的快捷功能键为(ctrl+k,ctrl+u).像这样类 ...

  7. MAVEN:不能互相引用

    工程A,工程B,工程C,这三个工程:C依赖B,B依赖A,这是没有问题的. 但是不能A依赖B,B又依赖A,这是不允许的.

  8. cube-ui

    cube-ui 新官网:https://didi.github.io/cube-ui/#/zh-CN

  9. nginx前后端分离路由配置

    参考链接: https://blog.csdn.net/qq_30021219/article/details/80901199

  10. 补充NTP知识的初中高

    前言 网上流传阿里穆工对NTP知识梳理的初级和中级版本.我从时钟服务器厂商在实践中的经验对穆工的文档进行再次整理和补充,希望对使用此设备的客户和对此有兴趣的同学给出一些指引. 个人认为对知识的了解应该 ...