前端页面添加灰色滤镜,使网页整体变灰
2024-05-05 20:22:15
前端页面添加灰色滤镜,使网页整体变灰
修改css样式
只需要在html的样式里面加一句代码
html,body,div,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'><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);filter: gray;
}
-webkit-filter（滤镜）有十种效果，分别是：
grayscale 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影
说明；因为该CSS样式对图片进行滤镜操作，所以PNG图片制作时尽量不要有毛边出现，否则，灰色滤镜化后会比较难看；
此外，html,body,div,img是对有可能进行灰色滤镜化元素的一个归类，若有部分元素不能出现灰色滤镜现象，请查看代码未被滤镜化元素是否被包含其中；
重要说明：此版本代码不支持IE10/11的灰色操作。
使用js实现
还可以使用js来实现置灰效果,qrayscaleJS代码下载地址.
如果下载不下来,复制下面代码引入项目中.
/** -- grayscale.js --* Copyright (C) James Padolsey (http://james.padolsey.com)**/var grayscale = (function(){var config = {colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],externalImageHandler : {/* Grayscaling externally hosted images does not work- Use these functions to handle those images as you so desire *//* Out of convenience these functions are also used for browserslike Chrome that do not support CanvasContext.getImageData */init : function(el, src) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:// Default - remove background imagesdata(el).backgroundImageSRC = src;el.style.backgroundImage = '';}},reset : function(el) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';}}}},log = function(){try { window.console.log.apply(console, arguments); }catch(e) {};},isExternal = function(url) {// Checks whether URL is external: 'CanvasContext.getImageData'// only works if the image is on the current domain.return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);},data = (function(){var cache = [0],expando = 'data' + (+new Date());return function(elem) {var cacheIndex = elem[expando],nextCacheIndex = cache.length;if(!cacheIndex) {cacheIndex = elem[expando] = nextCacheIndex;cache[cacheIndex] = {};}return cache[cacheIndex];};})(),desatIMG = function(img, prepare, realEl) {// realEl is only set when img is temp (for BG images)var canvas = document.createElement('canvas'),context = canvas.getContext('2d'),height = img.naturalHeight || img.offsetHeight || img.height,width = img.naturalWidth || img.offsetWidth || img.width,imgData;canvas.height = height;canvas.width = width;context.drawImage(img, 0, 0);try {imgData = context.getImageData(0, 0, width, height);} catch(e) {}if (prepare) {desatIMG.preparing = true;// Slowly recurse through pixels for prep,// :: only occurs on grayscale.prepare()var y = 0;(function(){if (!desatIMG.preparing) { return; }if (y === height) {// Finished!context.putImageData(imgData, 0, 0, 0, 0, width, height);realEl ? (data(realEl).BGdataURL = canvas.toDataURL()): (data(img).dataURL = canvas.toDataURL())}for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}y++;setTimeout(arguments.callee, 0);})();return;} else {// If desatIMG was called without 'prepare' flag// then cancel recursion and proceed with force! (below)desatIMG.preparing = false;}for (var y = 0; y < height; y++) {for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}}context.putImageData(imgData, 0, 0, 0, 0, width, height);return canvas;},getStyle = function(el, prop) {var style = document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(el, null)[prop]: el.currentStyle[prop];// If format is #FFFFFF: (convert to RGB)if (style && /^#[A-F0-9]/i.test(style)) {var hex = style.match(/[A-F0-9]{2}/ig);style = 'rgb(' + parseInt(hex[0], 16) + ','+ parseInt(hex[1], 16) + ','+ parseInt(hex[2], 16) + ')';}return style;},RGBtoGRAYSCALE = function(r,g,b) {// Returns single monochrome figure:return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );},getAllNodes = function(context) {var all = Array.prototype.slice.call(context.getElementsByTagName('*'));all.unshift(context);return all;};var init = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';context.style.zoom = 1;return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if(!src) { continue; }if (isExternal(src)) {config.externalImageHandler.init(cur, src);} else {data(cur).realSRC = src;try {// Within try statement just encase there's no support....cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();} catch(e) { config.externalImageHandler.init(cur, src); }}} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {var prop = config.colorProps[pIndex],style = getStyle(cur, prop);if (!style) {continue;}if (cur.style[prop]) {data(cur)[prop] = style;}// RGB color:if (style.substring(0,4) === 'rgb(') {var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';continue;}// Background Image:if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (isExternal(url)) {config.externalImageHandler.init(cur, url);data(cur).externalBG = true;continue;}// data(cur).BGdataURL refers to caches URL (from preparation)try {var imgSRC = data(cur).BGdataURL || (function(){var temp = document.createElement('img');temp.src = url;return desatIMG(temp).toDataURL();})();cur.style[prop] = style.replace(urlPatt, function(_, url){return '(' + imgSRC + ')';});} catch(e) { config.externalImageHandler.init(cur, url); }}}}}};init.reset = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if (isExternal(src)) {config.externalImageHandler.reset(cur, src);}cur.src = data(cur).realSRC || src;} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {if (data(cur).externalBG) {config.externalImageHandler.reset(cur);}var prop = config.colorProps[pIndex];cur.style[prop] = data(cur)[prop] || '';}}}};init.prepare = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }return;}// Slowly recurses through all elements// so as not to lock up on the user.context = context || document.documentElement;if (!document.createElement('canvas').getContext) { return; }var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (data(cur).skip) { return; }if (cur.nodeName.toLowerCase() === 'img') {if (cur.getAttribute('src') && !isExternal(cur.src)) {desatIMG(cur, true);}} else {var style = getStyle(cur, 'backgroundImage');if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (!isExternal(url)) {var temp = document.createElement('img');temp.src = url;desatIMG(temp, true, cur);}}}}};return init;})();
希望对你有帮助,
前端页面添加灰色滤镜,使网页整体变灰相关推荐
- 哀悼使网站整体变灰或黑
使用方法: 最简单的把页面变成灰色的代码是在head 之间加 <style type="text/css"> html { FILTER: gray } </st ...
- 政府网站公祭日，如何使网站整体变灰
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况.今天正好调了一下.在此把解决方案分享给大家.方案简单实用,笔者已在生产环境使用过.通过整体的html使用filter来进行过滤.如下,只要引入 ...
- html一键使网页字体变大,网页字体变大了怎么办
网页字体变大了导致重叠怎么办?不是缩放的原因 我的电脑网页字体变大了怎么办 按住CTRL在滚动鼠标滚轮...或者在网页右下角有个调整的,,百分之多少的..或者CTRL+ 或者CTRL- 都可以调整 原 ...
- 网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
- html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
- 网站网页快速变灰方法
所有页面都变灰 <style> html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:gra ...
- CSS网页页面图像灰色滤镜写法示例
阿酷TONY / 原创 2022-12-1 / 长沙 / grayscale()函数是一个内置函数,用于对图像应用滤镜以设置图像的灰度. 用法: grayscale( amount ) 参数: ...
- 前端页面添加全局水印或指定页面添加水印
前言 为了防止信息泄露或知识产权被侵犯,在web的世界里,对于图片文档等增加水印处理是十分有必要的.水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加. 今天介绍的就是通过canv ...
- QT Designer前端页面添加的图标在程序运行时不显示解决方法
1.首先需要将图标添加到资源管理器中 2.添加完毕后项目中会生成一个.qrc文件 3.添加一个External Tools 在PyCharm中的配置操作:File ->> Settings ...
最新文章
- 推荐一个非常COOL的开源相册程序!
- tf.ConfigProto()函数
- vue使用html渲染组件,Vue.js在渲染组件之前填充数据
- Node中使用mysql模块遇到的问题
- 3分钟，看回归分析模型怎么做
- CSS之Box-sizing
- python 视频流_Python实现mjpeg视频流
- linux计划任务与日志管理（日志分割/切割）
- 和catch的区别_面试刷题2:Exception和Error的区别?
- 微信小程序父子组件传值
- win11取消右键菜单折叠恢复经典传统菜单模式方法解决
- Lattice PCIe 学习 1
- java获取pid_JAVA 取得程序执行的PID(Process ID)
- 阻抗匹配50欧姆的原因
- Altium AD20整板放置GND过孔、批量放置GND过孔/缝合孔
- windows定时关机命令 取消定时关机命令 查看DNS缓存命令 清除DNS缓存命令
- C++ 函数指针 类成员函数指针
- linux下安装 postgresql 14
- getservbyname()函数与getservbyport()函数
- 简历中的自我评价怎么写？