让网页图片变灰色的三种方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如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文件
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了,你的浏览器上可以看到很炫的效果了!!
http://www.cnblogs.com/sosoft/
转载于:https://www.cnblogs.com/sosoft/p/3504894.html
让网页图片变灰色的三种方法相关推荐
- js 将图片置灰_让网页图片变灰色的三种方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...
- html 整体变为灰色,网页图片变灰色的三种实现办法_html/css_WEB-ITnose
1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在 ...
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...
- html页面打印+区域,实现web网页指定区域打印的三种方法
通过本教程可以实现,将印web网页指定区域的内容,本教程将提供三种方法实现. 方法一:打印网页指定区域 HTML 在需要打印的内容 // 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容 ...
- 如何放大图片,教您三种方法!
在日常生活中,我们经常会对一些尺寸不符合的照片进行放大处理,在这里我们就需要一些特殊的方法,接下来我们介绍三种方法. 最懒的方法:直接拉伸小图截取 简易程度:★★★★★ 图片质量:★ 适用人群:只需要 ...
- 前端PS中怎么把图片调暗?三种方法一键get
第一种:设置图片曲线法 第一步:先将图片置入PS里面来,如下图所示: 第二步:打开图像菜单栏中的曲线调节,如图 第三步:降低曲线的数值,如图所示,这样就可以将图片的亮度降低下来 第二种:打开图像中的色 ...
- 如何批量旋转图片?学会这三种方法就能轻松实现
对于喜爱拍照的小伙伴来说,你们的手机或者相机应该有很多图片素材吧.那么在整理这些图片到电脑的时候,你们的图片会不会出现方向不一致的情况呢?有的是倒着的,有的是左旋了90°.想要将这些图片都调整为同 ...
- cad线加粗怎么设置_cad怎么改变线条粗细? cad让线段变粗的三种方法
用CAD绘图过程中,有时候我们需要使某些线段变粗,以便突出表达.根据我个人经验,线段加粗的方法主要有三种,现在我来分享给大家,希望大家能受用.如图所示,我用L命令绘制一根线段:,这根线段的宽度为默认宽 ...
最新文章
- 位操作-按位与之如何求二进制数的1个数
- docker 镜像重命名_Docker镜像管理(二)
- 金蝶结账时显示系统错误h80004005_金蝶KIS云专业版(仓存模块)常见问题解决汇总...
- 转:字符编码笔记:ASCII,Unicode 和 UTF-8
- [html] 进入编辑页面时,如何把光标聚焦到第一个input?
- CHM文件打开显示乱码的解决方法
- 使用scroll实现Elasticsearch数据遍历和深度分页
- python生成数字证书_makecert 制作数字证书
- 编写自己的newman reporter
- checkra1n越狱教程linux,Checkra1n iOS 13.6.1 越狱技术教程
- mongoDB--初识mongoDB安装过程
- Spring Boot 面试的十个问题
- 细思极恐!使用 AI 控制你的浏览器
- steam教育文化传承的必要性
- signature=1eff1aaee251c280dde2d73a420031b7,Signature of the orthogonal companion in Kreĭn spaces.
- [Python的奇妙开发]用tkinter实现Galgame引擎的建立(一)
- 如何创建一颗“山楂树”
- lisp和python_给Lisp程序员的Python简介
- 乌班图服务器测试软件,如何在Ubuntu 18.04中对你的apache服务器运行压力测试
- 基于 MATLAB 的信号发生器设计