- 不同的浏览器将彩色图片显示为黑白图片的css,这里采用css filter
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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>#grayscale");
}
img:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
}
img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
img:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}
<script>
if(window.navigator.userAgent.indexOf("MSIE")>=1){
//如果浏览器为IE
setActiveStyleSheet("style_ie.css");
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1 ){
//如果浏览器为Firefox
alert("fire");
setActiveStyleSheet("style_fire.css");
}
else{
//如果浏览器为其它
setActiveStyleSheet("style_ie.css");
}
function setActiveStyleSheet(filename){
document.write("<link href=\".\/cs\/"+filename+"\" type=\"text\/css\" rel=\"stylesheet\">");
}
</script>
后记:
可以直接通过CSS实现,经过测试在firefox上是好使的,IE上不知道为什么,变不回彩色了。
<style type="text/css">
img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><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>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
img:hover{
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
}
</style>
分享到:
相关推荐
15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成...
在网页设计和开发中,视觉效果常常起到至关重要的作用,其中一种常见的视觉处理技术就是将彩色图片转换为黑白。"jQuery彩色图片转黑白图片网页特效代码"是一个实用的工具,它利用JavaScript库jQuery以及可能涉及的...
在图像处理领域,将彩色图片转换为黑白位图是一种常见的操作。这主要涉及到色彩空间转换、灰度化处理以及位图的理解。以下是对这个主题的详细讲解。 首先,我们需要了解彩色图片的基础。彩色图片通常使用RGB...
图片的灰度转换是将彩色图片转换为黑白色的过程。我们可以使用 canvas 元素和 FileReader 接口来实现图片的灰度转换。下面是一个基本的实现代码: `function file_droped(evt){ ... }` 在上面的代码中,我们定义...
在C#编程环境中,我们可以利用图像处理库如System.Drawing来实现彩色图片向黑白图片的转换。这个过程通常称为灰度化或二值化,即将图片的每个像素从RGB(红绿蓝)三色模型转换为单色调。下面,我们将详细讨论如何...
在Java编程语言中,图像处理是一项常见的任务,其中包括将彩色图片转换为黑白或灰度图像。这个过程涉及到图像的颜色模型转换,通常从RGB模型转换到灰度模型。RGB模型是红绿蓝三种颜色的组合,而灰度模型则是单一色调...
总结来说,批量将彩色图片转换为黑白图片在C#中主要涉及颜色模型的转换和图像处理API的使用。在使用VS2010进行开发时,应关注文件路径的兼容性和选择合适的图像处理库以提高性能。同时,解压缩文件时要考虑跨平台的...
在Python编程语言中,图像处理是一项常见的任务,可以用于创建各种视觉效果,包括将彩色图片转换为黑白铅笔素描图。这个压缩包文件“Python处理彩色图片为黑白铅笔素描图源码”提供了实现这一功能的具体代码,让我们...
接着,我们需要了解如何将彩色图片转换为黑白。一种常见的方法是利用CSS3的滤镜属性。例如,可以添加`filter: grayscale(100%)`来将图片变为全黑白色调。然而,CSS3滤镜在某些老版本的浏览器中可能不被支持,因此...
彩色bmp图像 转换 黑白bmp图像,包含24位深度彩色图像读取
将彩色图片转换为黑白效果,实质上就是将RGB三个通道的颜色信息整合为一个单一的灰度值。 在jQuery中,我们可以通过操作DOM元素的CSS属性或使用像素级的图像处理方法来实现这一转换。一种简单的方法是使用CSS滤镜...
标题中的“彩色图片转换成黑白图片(VB代码).rar”表明这是一个使用Visual Basic(VB)编程语言实现的项目,目标是将彩色图像转换为黑白图像。在计算机图形处理中,这种转换通常涉及到图像的灰度化过程。接下来,我们...
在MATLAB中,将彩色图片转换为黑白图片的过程涉及到图像处理的基本操作,主要涉及的知识点包括图像读取、颜色空间转换以及图像显示。下面将详细解释这些内容。 首先,我们从`imread()`函数开始。这是一个用于读取...
这是一款跨浏览器支持,使用多种技术手段来将彩色图片转换为黑白图片效果的jQuery彩色图片转黑白图片网页特效代码。 引入js文件 [removed][removed] [removed][removed]
这是一款跨浏览器支持,使用多种技术手段来将彩色图片转换为黑白图片效果的jQuery彩色图片转黑白图片网页特效代码。 引入js文件 [removed][removed] [removed][removed]
本话题将围绕如何使用MATLAB将彩色图片转换为黑白图片这一主题进行深入探讨。 首先,我们需要理解基本的图像表示。在MATLAB中,图像可以被当作一个矩阵来处理。如果一个图像为彩色图像,也就是我们常说的RGB图像,...
总的来说,“秋天一键图片批量黑白V1.01”是一个实用的图像处理工具,借助Qt库的强大功能,提供了一键批量将彩色图片转换为黑白图片的服务,满足了用户在各种场景下的图片处理需求。通过简单操作,用户可以轻松实现...
当我们将彩色图片转换为黑白图像时,通常会通过灰度算法来实现。灰度算法是将每个像素的RGB值转换为一个单一的灰度值,该值由三个原色的加权平均决定。 在jQuery中,我们可以通过遍历图片的每个像素,然后逐个调整...
本示例"jni开发demo:通过jni将一张彩色图片转换为黑白图片"是一个典型的JNI应用,它演示了如何利用JNI技术处理图像数据,实现颜色转换功能。 首先,我们需要了解JNI的基本工作原理。JNI主要包括以下几个步骤: 1....