html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰

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

下面提供两种方法：

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

Chrome内核的浏览器只需要一行属性代码即可：filter: grayscale(100%);

HTML部分代码：

为了形成对比，我把图片引入两次，其中一个添加了一个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;

}

如果需要整站变灰可以直接使用下方代码：* {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray;

}

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

效果如下：

给

标签添加属性，可以实现整站变灰效果。

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

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

a. 引入js文件：

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

您可以直接下载 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. 跨域：安全性机制，无法转换跨域的图片为黑白色。

html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰相关推荐

html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
html图片颜色变深,利用CSS改变图片颜色的100种方法！
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
利用CSS设置页面的垂直居中效果
实现垂直居中关键的属性是text-align(文字的对其样式),line-align(垂直居中的高度),vertical-align(垂直居中) <!DOCTYPE html> <h ...
css大图切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
html实现图片切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
最新ie图标变灰css,css+js整站变灰（兼容IE7+）
原标题:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写, ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...

html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰

html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰相关推荐

最新文章

热门文章