没有合适的资源？快使用搜索试试~ 我知道了~

文库首页行业研究行业报告CSS3滤镜及Canvas.docx

CSS3滤镜及Canvas.docx

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

0 下载量 172 浏览量 2022-11-26 18:58:21 上传评论收藏 763KB DOCX 举报

温馨提示

试读

25页

...

资源推荐

资源详情

资源评论

CSS3 滤镜及 Canvas、SVG 和 IE 滤镜替代方案详解

一、前

言

IE 特有的滤镜常常作为 CSS3 各种新特性的降级处理补充，而 Adobe 转向 HTML5 后与

Chrome 合作推出 CSS3 的 Filter 特性，因此当前仅 Webkit 内核的浏览器支持 CSS3

Filter，而 FF 和 IE10+则需要使用 SVG 滤镜(svg effects for html)或 Canvas 作为替代方

案处理了，而 IE5.5~9 则使用 IE 滤镜、JS+DIV 或 VML 处理！本篇为先占个坑，以后慢

慢填^_^！！！

CSS3 Filter 兼容性表

SVG effect for HTML 兼容性表

Speia 滤镜

反色滤镜

阴影滤镜

先 P 张原图作参考系（清纯 MM 哦！！）

Speia 滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看疗

效！

看，岁月的痕迹啊，是不是有妈妈年代的感觉呢？！

.sepia{

/** 格式，filer: sepia(效果范围)

* 效果范围，取值范围为 0-1 或 0-100%；0 表示无效果，1 或 100%表

示最大效果

-webkit-filter: sepia(100%);

-moz-filter:sepia(100%);

-o-filter: sepia(100%);

-ms-filter: sepia(100%);

}

</style>

尝试过 IE 滤镜 filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色) ，

仅仅能使用 gif 图片（其他格式的图片将导致整个元素消失不见），而且遮罩层与图片重

合的部分将变为空白一片，另外在 IE11 浏览器文档模式为 5.5~9 下滤镜均失效（元素按

照没有设置滤镜的方式被渲染显示）。结论：IE 滤镜无法处理 Sepia 效果。

而通过 js 填坑方面，想法 1：在元素表面附加一层半透明棕褐色的遮罩层，但效果与

CSS3 Filter 相距甚远，失败告终。。。。。。。

3. FF 和 IE10+的处理方式

可使用 Canvas 作处理，下面是简单实现的代码，目标元素 <img id="sepia"

src="./mm.jpg"/>

// 定义处理方法

var sepia = function(el){

// 对像素作处理

var imgData = ctx.getImageData(0, 0, w, h), d = imgData.data;

for (int i = 0, len = d.length; i < len; i+=4){

var r = d[i],

g = d[i+1],

b = d[i+2];

d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189);

d[i+1] = (r * 0.349)+(g * 0.686)+(b * 0.168);

d[i+2] = (r * 0.272)+(g * 0.534)+(b * 0.131);

}

剩余24页未读，继续阅读

评论收藏

内容反馈

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

不吃鸳鸯锅

粉丝: 8299
资源: 2万+

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

CSS3滤镜及Canvas.docx

图片旋转缩放翻转变换效果(css3滤镜canvas).zip

CSS3滤镜及Canvas.pdf

WEB开发 之 HTML 5 Canvas.docx

Html5 Canvas.docx

Android canvas.save()和canvas.restore()的理解

canvas.text.js

html2canvas.js 和jsPdf.debug.js下载.rar

html2canvas.min.js

html5之canvas.docx

WEB开发 之 HTML 5 Canvas vs. SVG.docx

html2canvas.js 下载

Android UI开发(五)Bitmap和Canvas实例.docx

flashcanvas.min.js

tkinter的canvas基本用法.docx

html2canvas.js

【JavaScript源代码】canvas操作插件fabric.js使用方法详解.docx

Cobalt Strike下载

计算机系统-笔记-HUN2021级

北京邮电大学计算机考研复试笔试资料

cs1.6老版本供下载

合成孔径雷达的经典成像算法cs(matlab)仿真代码（吐血整理，内容全，注释全）

港大CS（MSC）面试整理

合成孔径雷达RD CS OmegaK算法点目标仿真.rar

计算机科学导论原书第二版答案.zip

Cobalt-Strike-4.5

cobaltstrike4.3.zip

在dataGridView的列中出现日历选择控件的类型

541118 深入理解计算机系统（原书第三版）课程ppt

最新资源

WEB开发之 HTML 5 Canvas.docx

WEB开发之 HTML 5 Canvas vs. SVG.docx