<!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. 在ajax请求后台时在请求标头RequestHeader加token

    情景:为了保证系统数据的安全性,一般前后台之间的数据访问会有授权与验证,这里的Token机制相对于Cookie支持跨域访问,在RESTful API里面,验证一般可以使用POST请求来通过验证,使服务 ...

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

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

  3. Spring RedisTemplate操作-HyperLogLog操作（7）

    @Autowired @Resource(name="redisTemplate") private RedisTemplate<String, String> rt; ...

  4. JMS学习(五)--ActiveMQ中的消息的持久化和非持久化 以及 持久订阅者 和 非持久订阅者之间的区别与联系

    一,消息的持久化和非持久化 ①DeliveryMode 这是传输模式.ActiveMQ支持两种传输模式:持久传输和非持久传输(persistent and non-persistent deliver ...

  5. ie6下的line-height属性

    line-height这个属性是被ie6所支持的. 当是当一个父级元素内的子元素,包含了文字,且文字和img,input,label,span这些内联元素连接在一起的时候,你对父级元素设置line-h ...

  6. alert换行警示

    alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行.")

  7. Javascript - Vue - vue对象

    vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...

  8. Hibernate的实体规则、主键生成策略、对象状态

    一. hibernate的实体类有一定的规则,类似于mybatis的逆向工程导出的实体类.具体的规则以及原因如下: 1.持久化类需要提供无参的构造方法. 因为hibernate底层采用反射机制创建对象 ...

  9. Springboot：java.sql.SQLNonTransientConnectionException: CLIENT_PLUGIN_AUTH is required

    参考解决网址:https://www.cnblogs.com/studyDetail/p/7017911.html,谢谢. 数据库查询时报错:java.sql.SQLNonTransientConne ...

  10. 错误/异常：java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind；的解决方法

    1.异常视图 2.解决方法   SocketException(JVM_Bind):套接口异常     说明:服务器端口号被占用 了  解决方法:点击 Window-->Preferences- ...