前端如何让网页变灰
ninehua 2025-05-30 16:41 29 浏览
应用场景
全部网页变成灰色(黑白色)，那么今天就说说，通过几行简单的代码，来实现这个功能。
万法一：
第一种:修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰
html {
fiter. progid:DXlmage Transtorm.Microsoft Basiclmage(grayscale=1);
-webkit- fiter: grayscale(100%);
结果效果:
TBD
第二种:在网页的<head>标签内加入以下代码
如果你不想改动CSS文件，你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰
<style type="textcss">
html
fliter. progid:DXlmageTransform.Microsoft. Basiclmage(grayscale=1);
-webitfilter. grayscale(100%)}
</style>
结果效果:
TBD
第三种:修改<html>标签加入内联样式Q
如里上面的两种方式都不喜欢，可以通过修改<html>标签，以加入内联样式的方法，达到网页变灰的效果
<html style="liter. progid:DXlmage Transform.Microsoft. Basiclmage(grayscale=1);
-webi-fiter: graysale(100%)"*>
结果效果:
TBD
第四种:这里使用的CSS代码
body *{
-webi-fiter: grayscale(100%); |* webkit */
-mz-fiter: grayscale(100%); /firefox*/
-ms-iter. grayscale(100%); Pie9*/
-iter. grayscale(100%); *opera*/
fiter. grayscale(100%);
fiterprogid:DXlmage Transform.Microsoft Basiclmage(grayscale=1),
fitrgray; /ie9-*/ P但是这行代码是为了兼容IE,虽然-行代码很少，但是效果并不好，而且网页比较卡不推荐使用[即删除],同时
发现, csdn,京东,淘宝也都没有兼容IE11浏览器*/
结果效果:
TBD
以上几种方法，都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式
方法二
同时支持IE和Chrome, Safari,但是不支持Firefox.
html {overflow-yQ siolitereprogir:DXlmnageTransform.Microsoft. Basiclmage(grayscale= 1)-webit-fiter graysale(100%);}
补充:
body{
fitergray
说明:此方法支持IE,不支持Firefox和Chrome等非1E内核浏览器。
方法三
使用grayscale. js插件
使用grayscale.js插件。这个插件是模拟lE的iterprogid方法。
使用方法方法:
grayscale.js插件源文件: htp://c/. baiwanzhan. comjs/gray_ baiwanzhan.js
window. onload=function({
grayscale(document body);
说明:支持IE、Safari. Chrome. Opera和Firefox等浏览器。
问题:这个在IE下也挺占资源的。
方法四
找到你的CSS文件然后修改css代码文件。在以下的文件当中
form,diy,span,img,ul,ol,li,
加入filter. Gray;
总结:
建议:使用方法3，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。
相关推荐
- Access VBA获取磁盘的空间和剩余空间大小
-
转载一个AccessVBA代码获取磁盘的空间和剩余空间大小，整理成源码示例给有需要的Access网友参考学习。图示：示例下载：【转载】AccessVBA获取磁盘的空间和剩余空间大小；Access...
- 利用Access原有功能制作导航菜单
-
有时候制作一个小程序，为了方便和快捷，需要用到菜单，可以使用Access自带的导航菜单制作：如下图：先把需要使用的窗体制作好然后使用Access的功能区中[创建]--[导航]选择自己需要的导航格式...
- Parallel Access:用你的平板和手机接管电脑!
-
通常来说，好用的远程桌面应用一般都出现在桌面平台上，最差也得是平板电脑上，而出现在手机上的远程桌面应用一般效果都差得惊人……但人们一直在尝试在手机上像操作一个应用一样去控制电脑。而Parallel...
- Access自带附件的导出
-
【转载】Access自带“附件”字段类型的导出示例。此示例主要针对表中含有数据类型为“附件”的字段，如果需要将表中“附件”字段中的所有附件导出，可以选定导出的文件夹进行导出，此示例只是起到参考作用，具...
- access合并excel工作表
-
【源码示例】一键搞定--access合并excel工作表演示。老汉作为瓦工，access不能帮我砌墙，但每每看到白领美眉为汇总报表加班至深夜，惜玉之情油然而生，她们本可以更美的，如果她们学会了acce...
- Xboxone兼容Xbox360游戏支持跨区下载 EA Access福利延续至360游戏
-
欢迎点击文章标题下方蓝色的“XBOX早知道”，关注“xbox早知道”微信公众号；或微信直接搜索xboxzzd随着Xboxone正式更新Win10系统和实现Xbox360游戏的向下兼容，上时代的Xbox...
- Excel+Access制作的文件管理系统
-
文件管理系统2.0文件管理系统2.0：文件管理系统是一种用于组织、存储、检索和管理文件的软件或系统。它提供了一种结构化的方法来管理文件和文件夹，使用户能够轻松地查找、访问和共享文件。本期分享的文...
- Excel导入Access时快速创建表格式和设置字段类型
-
问题描述：使用Access过程中经常会遇到需要从Excel导入数据，头铁的同学为了方便一直都是直接使用第一个选项把Excel的数据导入到Access中。结果因为Excel的单元格式原因导致Access...
- TBC怀旧服出BUG，绿装属性碾压紫装，暴雪的魔改可不少
-
魔兽世界TBC怀旧服正在如火如荼地测试中，其中的BUG也是层出不穷，按理说暴雪直接复刻的非常成熟的2.43版本，问题应该非常少，为什么还有这么多BUG呢？其实根子在于这一次的TBC怀旧服和玩家们10多...
- 纯净厚重国风色调，简单后期方法。 #ps教程
-
纯净厚重国风破坏重组法，ACR/LR搞定。这种纯净厚重的国风色调该怎么样去调？首先要了解它的特点。·其一，它的整个亮度是不高不低，对比和反差相对来说中间偏一点大。·此外对绿色的刻画相对来说比较重，有一...
- 不想养绿萝了，就养它，叶子大又绿，光照弱也没事，漂亮又环保
-
花友们在养花圈里摸爬滚打这么久，是不是都有过这种崩溃时刻？精心伺候的绿萝，叶子越养越迷你，黄不拉几像生了锈，放客厅都没脸看？别急着扔花盆，今天必须给你们按头安利个"绿萝平替"——龟背竹...
- 手把手教您，ps怎么抠出图片的一部分
-
首先，打开PS（AdobePhotoshop），点击“文件”-“新建”，如图所示：然后，出现如下画面，编辑自己需要的图片宽度和高度，点击确定。如图所示：再拖入需要抠图的图片，如图所示：再点击PS左侧...
- PS后期改变背景颜色的技巧
-
PS后期更改背景颜色的技巧。1.我这边打开了一张素材图片，在左侧工具栏中直接选择对象选择工具，然后把主体的人物选择出来。2.选择好之后直接Ctrl加j复制一层。3.然后选中背景图层，直...
- 这种方法您想到了吗?灯带效果如何用ps做出来。
-
这种方法您想到了吗？今天讲一下用ps快速的制作比较逼真的灯带效果。当然用3d里面灯光也可以，只不过方法不一样效果不一样，各有各的优点。·第一步，打开要做灯带的素材，这是个效果图。·第二步，用钢笔工具选...
- 如何用PS给图片加简单水印?
-
例如，我要给上图中加水印，首先要新建一个画布：单击上图中“文件”菜单栏，选择“新建”。来到新建面板，我们做一个正方形的画布，所以宽度和高度的数值都设置成一样，数值不是固定的，可以随意调。要是想做长方形...