html设置图⽚为⿊⽩,CSS将彩⾊图⽚转换成⿊⽩图⽚
在下⾯我将讲解如何使⽤ CSS 的这个功能实现调整⾊调、模糊、亮度、对⽐度和⼀些其他的效果。
CSS3 的灰阶滤镜
使⽤ CSS3 来稀释⼀个图⽚的颜⾊，再简单不过了。我们可以把这个 CSS 语句写成⼀个类，这样遇到想要效果的图⽚，直接加上个类就可以了。 代码如下 复制代码
img.desaturate { filter: grayscale(100%); }
当然，当前的浏览器在使⽤ CSS3 的时候，要加上他们⾃⼰的浏览器功能实验性前缀，所以，我们⾸先要做的，就是写上浏览器的前缀：代码如下 复制代码
img.desaturate { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
想要⽤在某个图⽚上很简单，加上⼀个类： 代码如下 复制代码
这就可以了。
增加⼀个 SVG 的滤镜效果
这个功能⽬前只在 Chrome 18 有效，其他浏览器马上就会增加⽀持。为了在 Firefox 4 中得到相同的效果，我们可以需要使⽤ SVG 滤镜。我把新建了⼀个单独的⽂件 的 saturate.svg ，代码如下： 代码如下 复制代码
不要被这段 SVG 代码吓住了——虽然上⾯的矩阵数列有点复杂。这段代码我推荐你直接复制粘贴成⼀个通⽤的“⼩⽂件”。我会再写⼀篇⽂章详细介绍⼀下上⾯矩阵变化，在这⾥不再赘述。
加上上⾯的 SVG ⽂件引⽤，我们要插⼊ HTML 页⾯的 CSS 代码如下： 代码如下 复制代码
img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}
为 IE 做兼容
到现在我们的代码可以兼容未来的浏览器，和最新版的 Chrome 、 Firefox 4 。为了让 IE 6-9 加⼊兼容列表，我们需要使⽤微软的笨拙但是有效的 filter 滤镜： 代码如下 复制代码
img.desaturate{css最新
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
}
img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}
不幸的是，Safari 和 Opera 仍然不⽀持，但是 Safari 5.2 ——很快就会发布——应该会⽀持 webkit CSS3 滤镜功能，同时 Opera 对CSS3 的⽀持正在不断提升。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。