css3 滤镜效果（黑白滤镜、模糊化处理等）

原文地址：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201301053419890/

-webkit-filter，其存在的作用通常是进行图片的处理

原图样式：

网页代码：

<!doctype html>
<html>
<head>
 <meta charset='utf-8' />
 <title>-webkit-filter</title>
 <style type="text/css">
  img{-webkit-filter:grayscale(1);}
 </style>
</head><body>
 <img src="3.jpg" alt="" />
</body>
</html>

上面表示灰度100%效果图：

还可以添加的命令有：

-webkit-filter:blur(5px);  //模糊，此处为5像素-webkit-filter:sepia(0.5);  //叠加褐色，取值范围0-1，此处表示50%的褐色-webkit-filter:brightness(0.5);  //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片）-webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜-webkit-filter:invert(1);  //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色-webkit-filter:saturate(4);  //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大-webkit-filter:contrast(2);  //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大-webkit-filter:opacity(0.8);  //透明度，取值范围0~1,0为全透明，1为原图-webkit-filter:drop-shadow(17px 17px 20px black); //阴影

css3 滤镜效果（黑白滤镜、模糊化处理等）相关推荐

页面中的黑白滤镜css3，filter属性
在平常开发中遇到一些特殊节日的话会有一些滤镜效果,而这些效果可以使用一个css3的属性进行完成, 他就是filter属性属性值 filter: none | blur() | brightness( ...
Swift - 给图片添加滤镜效果（棕褐色老照片滤镜，黑白滤镜）
Core Image是一个强大的滤镜处理框架.它除了可以直接给图片添加各种内置滤镜,还能精确地修改鲜艳程度, 色泽, 曝光等,下面通过两个样例演示如何给UIImage添加滤镜. 1,棕褐色滤镜 - ...
基于HTML5 Canvas实现黑白滤镜
getImageData 和 putImageData 是 HTML5 Canvas两个比较常用的两个 API. 通过getImageData,可以得到canvas指定区域的像素点数组,每个像素点包 ...
css案例2——黑白滤镜
一.描述黑白滤镜,网页变黑白. 二.案例效果演示三.案例局部代码 css代码: <style>body {filter: grayscale(1);//css3中的滤镜模式1也可以写为 ...
java用opencv实现滤镜_opencv滤镜-二值化实现黑白滤镜
黑白滤镜黑白滤镜非常简单,顾名思义就是图像只有黑色与白色,这实际上就是图像的二值化.实现的原理也非常地简单,设定一个阈值,假设为128,判断每个像素点的灰度值,大于128设为255(对应白色),小于 ...
运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
opencv滤镜-二值化实现黑白滤镜
黑白滤镜黑白滤镜非常简单,顾名思义就是图像只有黑色与白色,这实际上就是图像的二值化.实现的原理也非常地简单,设定一个阈值,假设为128,判断每个像素点的灰度值,大于128设为255(对应白色),小于 ...
Android Camera使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理（黑白滤镜）
第一篇 Android Camera使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理(黑白滤镜) 第二篇 Android Camera使用OpenGL ES 2.0和T ...
canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)
示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...
4.5.2.3_黑白滤镜
4.5.2.3_黑白滤镜 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...

css3 滤镜效果（黑白滤镜、模糊化处理等）

css3 滤镜效果（黑白滤镜、模糊化处理等）相关推荐

最新文章

热门文章