<!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. POJ - 1094 Sorting It All Out（拓扑排序）

    https://vjudge.net/problem/POJ-1094 题意 对于N个大写字母,给定它们的一些关系,要求判断出经过多少个关系之后可以确定它们的排序或者排序存在冲突,或者所有的偏序关系用 ...

  2. 机器学习算法整理（七）支持向量机以及SMO算法实现

    以下均为自己看视频做的笔记,自用,侵删! 还参考了:http://www.ai-start.com/ml2014/ 在监督学习中,许多学习算法的性能都非常类似,因此,重要的不是你该选择使用学习算法A还 ...

  3. Hash::make与Hash::check

    调用方法之前要先去引用: use Illuminate\Support\Facades\Hash; 可以调用 Hash 门面上的 make 方法对存储密码进行哈希: $pwd = Hash::make ...

  4. Anaconda+django写出第一个web app（六）

    今天学习如何写一个注册用户的界面. 上一节的导航栏中我们修改了导航栏右侧的文字为register并将路径设置为/register,内容如下: <li><a href="/r ...

  5. 修改input placeholder样式

    <style> /* 通用 */ ::-webkit-input-placeholder { color: rgb(235, 126, 107); } ::-moz-placeholder ...

  6. Wordpress页脚

    <?php /** * The template for displaying the footer */ ?> <?php if ( apply_filters( 'show_fl ...

  7. redis从入门到踩坑

    背景 Redis在互联网项目的使用也是非常普遍的,作为最常用的NO-SQL数据库,对Redis的了解已经成为了后端开发的必备技能.小编对Redis的使用时间不长,但是项目中确两次踩中了Redis的坑, ...

  8. 【转】深入理解C++中public、protected及private用法

    首先明白以下两点: 1.类的一个特征就是封装,public和private作用就是实现这一目的. 即:用户代码(类外)可以访问public成员而不能访问private成员:private成员只能由类成 ...

  9. Project Euler Problem2

    Even Fibonacci numbers Problem 2 Each new term in the Fibonacci sequence is generated by adding the ...

  10. 关于tp5 的验证码遇到的一些问题

    问题1: 网上大部分给的安装包是: composer require topthink/think-captcha 但是会提示你下载失败说要你回复*****的原始数据啥的 那可能是因为你的安装环境版本 ...