| 标题 | 让网站图片生成灰色效果的三种方法 |
| 内容 | 我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易，因为浏览器有差异。 1、CSSFilter 使用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浏览器(Chrome18+,Safari6.0+,andOpera15+) (注意:这段代码在Firefox上无效果。) 2、Javascript 第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下 代码如下: 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 第三种方法来自SVGFilter.，你需要创建一个SVG文件,并将以下代码写在里面，保存命名为***.svg 代码如下: <svgxmlns="http://www.w3.org/2000/svg"> <filterid="grayscale"> <feColorMatrixtype="matrix"values="0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010"/> </filter> </svg> 然后利用过滤器的属性，我们可以通过SVG文件中的元素的ID连接SVG文件 代码如下: 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");') } 总结 为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持Firefox3.5+,Opera15+,Safari,Chrome,andIE 代码如下: 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-jsimg{ -webkit-filter:grayscale(100%); -webkit-filter:grayscale(1); filter:grayscale(100%); filter:url('../img/gray.svg#grayscale'); filter:gray; } OK了，你的浏览器上可以看到很炫的效果了！！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。