一、Css  Blur()

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>.

blur(radius)

radius模糊的半径，值为<length>。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。

blur()        /* No effect */

blur(8px)      /* Blur with 8px radius */

blur(.17rem)  /* Blur with 1.17rem radius */

二、使用示例：

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

2.示例：

<!DOCTYPE html>

<html>

<head>

<style>

img {

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

    filter: blur(5px);

}

</style>

</head>

<body>

<p>图片使用高斯模糊效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>

</body>

</html>

更多：

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

网页中实现图片的毛玻璃效果

Css3 文字渐变整理（一）

CSS Blur() 将高斯模糊应用于输出图片的更多相关文章

  1. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了！像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  2. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  3. MVC控制下输出图片、javascript与json格式

    /// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...

  4. C#调用R语言输出图片

    参考:http://rdotnet.codeplex.com/documentation   REngine.SetEnvironmentVariables(); REngine engine = R ...

  5. javascript 控制台输出 图片 console.log 真强大 真佩服你们的创造力

    无意中,在百度知道页面发现了这货.居然能输出图片到控制台. 完全颠覆自己的三观,果断查阅其输出方法.后得知,原来如此. 曾经做过的项目中,同事把控制台做成一个网页形式方便远程控制和远程调用.没想到过这 ...

  6. LODOP直接用base64码输出图片

    Lodop中的ADD_PRINT_IMAGE,也可以直接输出base64码图片,不用加img标签,如果加了img标签,会被当做超文本对待,受浏览器引擎解析的影响. 什么时候使用base64码直接输出比 ...

  7. django2 显示图片 输出图片

    使用笨办法,指向图片的路径,然后输出图片. 首先路由设置: # 查看图片 path('tu/', ShowTuView.as_view(), name='image') 视图代码: import os ...

  8. python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题

    问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...

  9. css blur 的兼容写法

    出自:小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 .blur { filter: url(blur.svg#blur); /* IE10, IE11 */ -webkit-filter: b ...

随机推荐

  1. 英语koreite寿山石koreite单词

    koreite指寿山石 寿山石是中华瑰宝,中国传统“四大印章石“之一.分布在福州市北郊晋安区与连江县.罗源县交界处的“金三角”地带. 寿山石是福州特有的名贵石材,其石质晶莹.脂润.色彩斑斓,色泽浑然天 ...

  2. YUV详解

    YUV格式解析2 又确认了一下H264的视频格式——H264支持4:2:0的连续或隔行视频的编码和解码   YUV(亦称YCrCb)是被欧洲电视系统所采用的一种颜色编码方法(属于PAL).YUV主要用 ...

  3. redis-Jedis连接集群

    关闭防火墙或把端口加入防火墙 一.通过代码 @Test public void testJedisCluster() throws Exception { //创建一连接,JedisCluster对象 ...

  4. redis中获取不同自增数的方法

    项目需求,需要获取不同的自增数,然后与其他信息拼接成一个字符串作为编号,这边有一种基于数据库的获取自增数的方法,这边略过,还有一种基于redis的实现. 此方法可以用到redis的自增函数 publi ...

  5. Httpd服务入门知识-Httpd服务安装

    Httpd服务入门知识-Httpd服务安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Httpd概述 1>.Httpd介绍 20世纪90年代初,国家超级计算机应用中心 ...

  6. Unity历史版本的文档

    前言 在我们的开发过程中,如果要查找Unity文档,通常会有以下两种方式: 1. 打开Unity的官网,查找文档 2. 查找本地安装的Unity文档 但是Unity官网上的文档,总是当前最新版本的文档 ...

  7. Java Spring Boot 一些调试技巧

    配置文件的管理 有的时候我们希望开发环境和测试环境的配置文件放在一起可以快速切换 spring boot 为我们提供了很方便的的选项 在 application.properties 中只需要添加属性 ...

  8. 201671030117 孙欢灵 实验十四 团队项目评审&课程学习总结

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 任务一:团队项目审核已完成.项目验收过程意见表已上交. 任务二:课程学习 ...

  9. HDU6592 Beauty Of Unimodal Sequence

    Beauty Of Unimodal Sequence 给一个序列,在满足单调递增或者单调递减或者先增后减的最长子序列集合里找到下标字典序最大以及最小的两个子序列,输出这两个子序列里元素的下标. n≤ ...

  10. 利用反射与dom4j读取javabean生成对应XML

    项目中需要自定义生成一个xml,要把Javabean中的属性拼接一个xml,例如要生成以下xml <?xml version="1.0" encoding="gb2 ...