CSS Blur() 将高斯模糊应用于输出图片
一、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
CSS Blur() 将高斯模糊应用于输出图片的更多相关文章
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- css奇特用法之 IMG添加背景图片配合显示--效果惊艳
IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...
- MVC控制下输出图片、javascript与json格式
/// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...
- C#调用R语言输出图片
参考:http://rdotnet.codeplex.com/documentation REngine.SetEnvironmentVariables(); REngine engine = R ...
- javascript 控制台输出 图片 console.log 真强大 真佩服你们的创造力
无意中,在百度知道页面发现了这货.居然能输出图片到控制台. 完全颠覆自己的三观,果断查阅其输出方法.后得知,原来如此. 曾经做过的项目中,同事把控制台做成一个网页形式方便远程控制和远程调用.没想到过这 ...
- LODOP直接用base64码输出图片
Lodop中的ADD_PRINT_IMAGE,也可以直接输出base64码图片,不用加img标签,如果加了img标签,会被当做超文本对待,受浏览器引擎解析的影响. 什么时候使用base64码直接输出比 ...
- django2 显示图片 输出图片
使用笨办法,指向图片的路径,然后输出图片. 首先路由设置: # 查看图片 path('tu/', ShowTuView.as_view(), name='image') 视图代码: import os ...
- python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题
问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...
- css blur 的兼容写法
出自:小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 .blur { filter: url(blur.svg#blur); /* IE10, IE11 */ -webkit-filter: b ...
随机推荐
- select用法 多并发处理
select默认最大检查套接口数量是1024,有定义 #define __NFDBITS (8 * sizeof(unsigned long)) #define __FD_SETSIZE 1024 # ...
- JS案例--Tab栏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- elasticsearch must 和 should 并列的情况
在elasticsearch中如果要对几个字段进行查询,然后其中有一个字段可以有多个取值的时候,正常想到的要用should,其实就是或的关系.但是正确的做法,应该是把should并列的条件整合到一个b ...
- SpringBoot2.x搭建SpringBootAdmin2.x
1 说明 全部配置基于1.8.0_111 当前SpringBoot使用2.0.5 SpringBootAdmin基于Eureka进行Client发现,Eureka搭建参见SpringBoot2.x搭建 ...
- Prometheus学习笔记(5)Grafana可视化展示
目录 一.Grafana安装和启动 二.配置数据源 三.配置dashboard 四.配置grafana告警 一.Grafana安装和启动 Grafana支持查询Prometheus.从Grafana ...
- k8s的常用命令(一)
常用的kubectl命令 kubectl run kubia --image=luksa/kubia --port=8080 --generator=run/v1 --image 指定镜像 - ...
- Markdown Mermaid
Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生成 U ...
- MIME Type介绍 Content-Type 各种定义
多用途互联网邮件扩展(MIME,Multipurpose Internet Mail Extensions)是一个互联网标准,它扩展了电子邮件标准,使其能够支持非ASCII字符.二进制格式附件等多种格 ...
- GeoIP简介与资源,定位经纬度,获取用户IP
所谓GeoIP,就是通过来访者的IP,定位他的经纬度,国家/地区,省市,甚至街道等位置信息.这里面的技术不算难题,关键在于有个精准的数据库.有了准确的数据源就奇货可居赚点小钱,可是发扬合作精神,集体贡 ...
- Worldview in Context
Worldview in Context Figures 1 and 2 provide a basis for a deeper understanding of worldview. The se ...