没有合适的资源?快使用搜索试试~ 我知道了~
CSS3滤镜及Canvas.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 133 浏览量
2022-11-19
13:50:08
上传
评论
收藏 1.08MB PDF 举报
温馨提示
试读
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 滤镜(Speia)
Speia 滤镜是对图片或元素整体进行棕褐色处理,就是老照片那种效果。下面直接看疗
效!
看,岁月的痕迹啊,是不是有妈妈年代的感觉呢?!
1. CSS3 滤镜实现
<style type="text/css">
.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%);
filter: sepia(100%);
}
</style>
<div class="sepia" style="background:url(./mm.jpg)"></div>
2. IE5.5~9 特的处理方式(待研究)
尝试过 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 canvas = document.createElement(canvas );
var w = canvas.width = el.offsetWidth,
h = canvas.height = el.offsetHeight;
var ctx = canvas.getContext(2d );
ctx.drawImage(el, 0, 0);
// 对像素作处理
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页未读,继续阅读
资源评论
春哥111
- 粉丝: 1w+
- 资源: 5万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功