CSS滤镜之Blur滤镜——模糊

Blur滤镜比较类似于ps里面的运动模糊效果。

语法:

{FILTER:blur(add=add,direction=direction,strength=strength)}

“ADD”参数是一个布尔判断“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的,

“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。

“STRENGTH“值只能使用整数来指定,她代表有多少像素的宽度将受到模糊影响。默认是5个。

实例:

<html>
<head>
<title>blur效果展示:</title>
<style type="text/Css">
.a1{filter:blur(add=ture,direction=135,strength=10);height:450;font-size:72;color:blue;font-weight:bold}  //方向135  影响宽度10
.a2{filter:blur(add=ture,direction=45,strength=10);height:450;font-size:72;color:blue;font-weight:bold}  //方向45  影响宽度10
.a3{filter:blur(add=ture,direction=135,strength=20);height:450;font-size:72;color:blue;font-weight:bold}  //方向135  影响宽度20
</style>
</head>
<body>
<img src=gril.jpg height = 450>
<img src=gril.jpg class="a1"><br>
<img src=gril.jpg class="a2">
<img src=gril.jpg class="a3">
</body>
</html>

CSS滤镜之Blur滤镜——模糊,布布扣,bubuko.com

时间: 2024-08-05 21:51:23

CSS滤镜之Blur滤镜——模糊的相关文章

CSS滤镜之Alpha滤镜——透明度

在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度.还可以通过指定坐标,从而实现各种不同范围的透明度. 具体语法如下:{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)} 具体参数含义如下:opacity 透明度.默认的范围是从0 到 100,他们其实是百分比

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

Atitit 图像处理之仿油画效果&#160;Oilpaint油画滤镜 水彩画 漫画滤镜&#160;v2

Atitit 图像处理之仿油画效果 Oilpaint油画滤镜 水彩画 漫画滤镜 v2 1.1. 具体源码参考1 2. ,油画 水彩画具有几个比较明显的特点如下:1 2.1. 明暗层次(灰度)较少  也就5级别够用了1 2.2. 颜色泛用   使用的颜色比较单一,一般不会超过7种颜色,不像真实照片那样,具有丰富的颜色种类:2 3. 水彩画滤镜算法如下:2 3.1. 这个其实就是灰度层次降低维度的过程.3 3.2. 模板半径Radius用来调节水彩画的水彩程度.即是颜色的降低维度的过程3 3.3.

图像滤镜艺术--Toaster滤镜

根据Instagram CEO的说法,Toaster滤镜是Instagram所有滤镜中最复杂的滤镜,这个滤镜给人一种新奇的红色烘烤感,很能让人联想起这个Toaster单词的本意呵呵,今天我将用C#实现这个滤镜,当然我也只是探索,如何逼近它的效果,差异的存在在所难免,大家勿怪哦. 按照之前的说法,还是先使用Photoshop进行模拟,然后根据模拟步骤,进行C#代码编写. 首先,看下效果图: (a)PS效果图 (b)Instagram效果图 (c)C#代码效果图 效果怎么样我说了不算呵呵,下面介绍P

HTML CSS决定定位、滤镜

1.position:relative;相对对位 不影响元素本身的特性: 不使元素脱离文档流: 如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制:top/right/bottom/left: IE6下父级的overflow:hidden是包不住子集的相对定位:解决只需要 给父级就加上定位元素: 在IE6下定位元素的父宽高都为奇数时,定位元素的bottom和right会有 1px的偏差 2.position:absolute;绝对定位 可以使元素脱离文档流 使内嵌支持宽高: 块属性标

图像滤镜艺术--暴雨滤镜

    今天给大家介绍的是一款暴雨滤镜,可以将一些风和日丽的风景照片变换为暴雨效果的照片,废话不多说,先给大家看下效果: (a)原图 (b)PS效果图 (c)代码实现效果图 这个暴雨滤镜也比较简单,按照之前的步骤,我们依次介绍PS实现过程以及代码实现过程. PS实现过程如下: 1,暴雨模板图像生成: 这个过程我简单介绍一下我的实现,不过大家不需要自己制作模板了,我已经把模板放在了资源里,大家直接使用即可.模板制作步骤如下: 1.1 新建一个空白图像,大小按照自己的需要确定,我这里取的是1000*

图像滤镜艺术--大雪滤镜

今天给大家介绍一款大雪滤镜,可以使你夏天的照片瞬间幻化为大雪纷飞的场景哦!先看下效果图: 上面三张图像分别是(a)原始图像,(b)PS效果图,(c)C#代码效果图 这个大雪滤镜也比较简单,按照之前的步骤,我们依次介绍PS实现过程以及代码实现过程. PS实现过程如下: 1,打开原始图像,复制图层a,新建图层mask,填充为黑色: 2,滤镜--杂色--添加杂色: 3,模糊--进一步模糊: 4,调整色阶: 5,高斯模糊,与a进行混合,选择混合图层-滤色模式: 6,原图调出冷色调: 这样就出来了大雪效果

Swift - 给图片添加滤镜效果(棕褐色老照片滤镜,黑白滤镜)

Core Image是一个强大的滤镜处理框架.它除了可以直接给图片添加各种内置滤镜,还能精确地修改鲜艳程度, 色泽, 曝光等,下面通过两个样例演示如何给UIImage添加滤镜. 1,棕褐色滤镜  - CISepiaTone 这个有点复古老照片发黄的效果(上面一张是原图). 扩展UIImage类,添加棕褐色滤镜: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import UIKit //--- UIImageFilterExtensi

图像滤镜艺术---水彩画滤镜

水彩画滤镜 水彩画滤镜算法如下: 1,假设原始图像为F(x,y),灰度化得到G(x,y): 2,构建一个半径为Radius的正方形模板M,边长为2*Radius+1: 3,将M在F上依次遍历每个像素,对于当前像素P(x,y): 设置一个油漆桶数N,由于图像灰度值范围为0-255,因此我们油漆桶的数量N要小于255,这个油漆桶是用来盛放不同类别的像素. 3.1首先按照油漆桶数N将0-255的范围划分为等距的N个油漆桶,对于模板中对应的像素,我们按照其灰度值,依次将其放入相应的油漆桶中: 3.2统计