css 改变图片灰度颜色

我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异。

1、CSS Filter

使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。

现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。

添加如下CSS样式可以将图像变成灰色

复制代码

代码如下:

img { 
-webkit-filter: grayscale(1);/* Webkit */ 
filter:gray;/* IE6-9 */ 
filter: grayscale(1);/* W3C */ 
}

支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)

(注意:这段代码在Firefox上无效果。)

2、Javascript

第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下

代码来自Ajax Blender.

复制代码

代码如下:

varimgObj = document.getElementById(‘js-image‘); 
functiongray(imgObj) { 
varcanvas = document.createElement(‘canvas‘); 
varcanvasContext = canvas.getContext(‘2d‘); 
varimgW = imgObj.width; 
varimgH = imgObj.height; 
canvas.width = imgW; 
canvas.height = imgH; 
canvasContext.drawImage(imgObj, 0, 0); 
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 
for(vary = 0; y < imgPixels.height; y++){ 
for(varx = 0; x < imgPixels.width; x++){ 
vari = (y * 4) * imgPixels.width + x * 4; 
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; 
imgPixels.data[i] = avg; 
imgPixels.data[i + 1] = avg; 
imgPixels.data[i + 2] = avg; 


canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
returncanvas.toDataURL(); 

imgObj.src = gray(imgObj);

3、SVG

第三种方法来自SVG Filter.,你需要创建一个SVG文件,并将以下代码写在里面,保存命名为***.svg

复制代码

代码如下:

<svgxmlns=" http://www.w3.org/2000/svg"> 
<filterid="grayscale"> 
<feColorMatrixtype="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> 
然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件 
[code] 
img { 
filter:url(‘img/gray.svg#grayscale‘); 
}

你也可以把它放到CSS文件中,例如:

复制代码

代码如下:

img { 
filter:url(‘url("data:image/svg+xml;utf8,<svg%20xmlns=‘ http://www.w3.org/2000/svg‘><filter%20id=‘grayscale‘><feColorMatrix%20type=‘matrix‘%20values=‘0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200‘/></filter></svg>#grayscale");‘) 
}

总结

为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持Firefox 3.5+, Opera 15+, Safari, Chrome, and IE

复制代码

代码如下:

img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 
filter:url(‘../img/gray.svg#grayscale‘); 
filter:gray; 
}

我们可以利用上面的代码和JavaScript方法和只提供CSS滤波器作为后备以防JavaScript被禁用。这个想法可以很容易地Modernizr的帮助下实现的。

复制代码

代码如下:

.no-js img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 
filter:url(‘../img/gray.svg#grayscale‘); 
filter:gray; 
}

OK了,你的浏览器上可以看到很炫的效果了!

时间: 2024-09-29 04:35:41

css 改变图片灰度颜色的相关文章

改变图片的颜色

定义 #import <UIKit/UIKit.h> @interface UIImage (ChangeImageColor) /** * 改变图片的颜色 * * @param tintColor <#tintColor description#> * * @return <#return value description#> */ - (UIImage *) imageWithTintColor:(UIColor *)tintColor; @end 实现 - (U

CSS改变插入光标颜色caret-color简介及其它变色方法(转)

一.CSS改变输入框光标颜色的原生属性caret-color CSS caret-color属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色. 例如: input { color: #333; caret-color: red; } 结果光标颜色变成红色,文字还是深黑色: 眼见为实,您可以狠狠的点击这里:CSS caret-color改变光标颜色demo //zxx: 单词caret表示"插入符号",指处于内容可插入状态的光标. caret-color属性不仅对于原

使用 SetColorFilter 神奇地改变图片的颜色

关键代码如下: colors.xml文件中定义一个颜色值: <color name="permission_dialog_img_color">#000000</color> 代码中调用: int mFilterColor = ContextCompat.getColor(mContext,R.color.permission_dialog_img_color); int blue = Color.blue(mFilterColor); int green =

Android改变图片背景颜色tint(着色)或 backgroundTint

安卓对图标着色以节省apk体积,网上有很多介绍到的,使用也很简单 <ImageView     android:tint="@android:color/white"     android:backgroundTint="@android:color/black"     /> 平时都这样使用,今天得在代码中改,所以记录一下 第一种 Drawable icon; if (android.os.Build.VERSION.SDK_INT < and

CSS 改变input placeholder 颜色

input:-ms-input-placeholder { color: #a9a9a9; }/* Internet Explorer 10+ */ input::-webkit-input-placeholder { color: #a9a9a9; }/* WebKit browsers */ input::-moz-placeholder { color: #a9a9a9; }/* Mozilla Firefox 4 to 18 */ input:-moz-placeholder { col

两行 CSS 代码实现图片任意颜色赋色技术

如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢? 使用 background-blend-mode: lighten 实现任意图片颜色赋色技术 假设我们有这样一张图片,JPG.PNG.GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色: 利用 background-blend-mode ,我们可以在图片下叠加多一层其他颜色,通过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的. 简单的 CSS 代码示意如下:

使用asp.net改变图片颜色

最近奇葩经理提出了奇葩的需求,要能在网站上改变图片的颜色,比如灰色的变成彩色,彩色的变成灰色,尼玛楼主的感受你们不懂!于是有了下面的代码... 用法:调用update_pixelColor方法并传参数即可 C#代码   #region 改变图片颜色 /// <summary> /// 改变图片的颜色 /// </summary> /// <param name="filePath">图片的完整路径</param> /// <para

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜

【转】使用blend改变图片颜色

最近对Core Animation和Core Graphics的内容东西比较感兴趣,自己之前也在这块相对薄弱,趁此机会也想补习一下这块的内容,所以之后几篇可能都会是对CA和CG学习的记录的文章. 在应用里一个很常见的需求是主题变换:同样的图标,同样的素材,但是需要按照用户喜爱变为不同的颜色.在iOS5和6的SDK里部分标准控件引入了tintColor,来满足个性化界面的需求,但是Apple在这方面还远远做的不够.一是现在用默认控件根本难以做出界面优秀的应用,二是tintColor所覆盖的并不够全