网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,不兼容其他浏览器。如今,CSS3完美搞定CSS3 greyscale 滤镜实现如下测试代码:.gray { -webkit-filter: grayscale(100%);

网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,不兼容其他浏览器。

如今,CSS3完美搞定


CSS3 greyscale 滤镜实现

如下测试代码:

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
    filter: gray;
}

HTML代码:

<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />

SVG滤镜实现

新建一个空白文本文件,比如说:gray.txt. 拷贝进去如下的XML代码:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

然后,修改后缀.txt → .svg. 然后就可以调用了~~

修改文本文件后缀变成SVG文件

用CSS将网站图片转换成黑白

如下CSS调用代码:

filter: url(gray.svg#grayscale);

别忘了IE浏览器

IE下实现上面已经提过,就是:

filter: gray;

至少IE7~9都是支持的。IE6不知道,



上一篇:用php处理视频格式转换ffmpeg-php安装与使用

下一篇:常用SQL语句

评论列表
发表评论
称呼
邮箱
网址
验证码(*)
热评文章
相关阅读