专栏首页前端资源利用CSS设置图片黑白/灰色效果

利用CSS设置图片黑白/灰色效果

写页面的时候由于页面风格原因,可能需要图片变灰色,如果用图片处理软件的话可能会比较麻烦,而且会增加图片的数量,不利于资源的合理利用。

下面提供两种方法:

1、使用CSS的 filter: gray;  属性即可实现灰度效果。

Chrome内核的浏览器只需要一行属性代码即可:

filter: grayscale(100%);

HTML部分代码:

<img src="img/qingxin.png" alt="">
<img class="g" src="img/qingxin.png" alt="">

为了形成对比,我把图片引入两次,其中一个添加了一个class g ,用来给它设置样式。

CSS部分代码,为了保证兼容性,可以写成:

img {
  width: 300px;
}
.g {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

首先给图片设置一个宽度,再给其中一个设置灰度属性。

效果如下:

给 <body> 标签添加属性,可以实现整站变灰效果。

网上说的其中的 filter: gray; 就是兼容IE的,不过我试着好像不行,可以使用第二种方法。

2、利用 grayscale.js 实现图片的灰度效果。方法很简单:

a. 引入js文件:

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

但是这个链接好像被墙了。。。可以引入我网站的链接:

<script src="http://cdn.w3h5.com/down/source/js/grayscale.js"></script>

您可以直接下载 js 文件引入 下载链接:点击下载 grayscale.js

在 script 标签内添加一行:

grayscale(document.getElementById("g"));//通过ID调用

或DOM元素集:

grayscale(document.getElementsByTagName("img"));

也可以使用JQuery调用:

grayscale($("#g"));

需要注意的是:

Grayscale.js 是模仿微软专有的“ 灰度 ”过滤器的实验性尝试(在大多数IE版本中都可用)。在Opera 9,FF2 / 3,Safari 4,IE6 / 7中测试可用。

它可能不适用于Safari 4和Chrome,因为它们不支持 CanvasContext.getImageData(因为图像不能灰度化)。

实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换~~

因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:

1. 速度:300*300这张一般般大小的图片变灰就要数秒之久;

2. 跨域:安全性机制,无法转换跨域的图片为黑白色。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Chrome用户代理切换插件User-Agent Switcher下载

    您是否曾需要经常切换用户代理字符串?开发需要同时在移动PC浏览器上运行的网站?是否厌倦了一些古老的网站,因为没有Netscape 4而无法使用?

    德顺
  • Windows10 ARM版本Chromium性能大幅提升

    实验将基于ARM版本的真机Windows 10与仿真的x86版本进行比较,并发现了处理器占用上的巨大差异。当他们尝试在两台Windows 10电脑上打开Chro...

    德顺
  • 新手创建第一个GitHub项目,一步一步将本地项目提交到GitHub

    本文将要记录的是,创建第一个 GitHub 项目,并将自己的本地项目上传到 GitHub。

    德顺
  • CRM Fiori Customer report filter过滤器

    Webstorm更友好的Git版本控制,有改动的行有白色标记提示,并且能够inline查看diff或者选择revert,这样我就不担心mess up produ...

    Jerry Wang
  • Java ---Filter过滤器

         Filter可以视作是servlet的加强版,主要用作对用户的请求进行预处理,或者对返回给客户端的结果进行再次加工,是一个典型的链式处理模式。本篇简单...

    Single
  • python3和python2中的filter区别

    python3中的filter与python2中的是不一样的 其中,在python2中

    周小董
  • angularjs filter详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的...

    柴小智
  • 网络工程师入门系列 | 通配符掩码计算

    通配符掩码(wildcard-mask)路由器使用的通配符掩码与源或目标地址一起来分辨匹配的地址范围,它与子网掩码不同。它不像子网掩码告诉路由器IP地址的哪一位...

    网络技术联盟站
  • Filter,一种aop编程思想的体现

    一、filter简介 filter是Servlet规范里的一个高级特性,只用于对request、response的进行修改。 filter提出了FilterCh...

    方志朋
  • FFMPEG 参数详细说明

    用法:ffmpeg [options] [[infile options] -i infile] … {[outfile options] outfile} …

    程序手艺人

扫码关注云+社区

领取腾讯云代金券