前端如何让网页变灰
liebian365 2024-11-18 14:19 18 浏览 0 评论
应用场景
全部网页变成灰色(黑白色)，那么今天就说说，通过几行简单的代码，来实现这个功能。
万法一：
第一种:修改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，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。
- 上一篇：前端调优23大规则(Part 4)
- 下一篇：AppLocker绕过之路
相关推荐
- 月薪 4K 到 4W 的运维工程师都经历了什么?
-
运维工程师在前期是一个很苦逼的工作，在这期间可能干着修电脑、掐网线、搬机器的活，显得没地位！时间也很碎片化，各种零碎的琐事围绕着你，很难体现个人价值，渐渐的对行业很迷茫，觉得没什么发展前途。这些枯燥无...
- 计算机专业必须掌握的脚本开发语言—shell
-
提起Shell脚本很多都有了解，因为无论是windows的Dom命令行还是Linux的bash都是它的表现形式，但是很多人不知道它还有一门脚本编程语言，就是ShellScript，我们提起的Shel...
- Linux/Shell:排名第四的计算机关键技能
-
除了编程语言之外，要想找一份计算机相关的工作，还需要很多其他方面的技能。最近，来自美国求职公司Indeed的一份报告显示：在全美工作技能需求中，Linux/Shell技能仅次于SQL、Java、P...
- 使用Flask应用框架在Centos7.8系统上部署机器学习模型
-
安装centos7.8虚拟环境1、镜像链接...
- shell编程
-
简介：Shell是一个用C语言编写的程序，它是用户使用Linux的桥梁。Shell既是一种命令语言，又是一种程序设计语言。...
- 14天shell脚本入门学习-第二天#脚本和参数#排版修正
-
脚本是一种包含一系列命令的文本文件，通常用于自动化任务。Shell脚本是用Shell命令编写的脚本，可以在命令行中执行。掌握脚本的基础知识和变量的使用是编写高效脚本的关键。...
- 嵌入式Linux开发教程:Linux Shell
-
本章重点介绍Linux的常用操作和命令。在介绍命令之前，先对Linux的Shell进行了简单介绍，然后按照大多数用户的使用习惯，对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂，都给...
- 实现SHELL中的列表和字典效果
-
大家好，我是博哥爱运维。编写代码，很多情况下我们需要有种类型来存储数据，在python中有列表和字典，golang中有切片slice和map，那么在shell中，我们能否实现列表和字典呢，答案是肯定的...
- 14天shell脚本入门学习-第二天#脚本和变量
-
脚本是一种包含一系列命令的文本文件，通常用于自动化任务。Shell脚本是用Shell命令编写的脚本，可以在命令行中执行。掌握脚本的基础知识和变量的使用是编写高效脚本的关键。...
- shell常用命令之awk用法介绍
-
一、awk介绍awk的强大之处，在于能生成强大的格式化报告。数据可以来自标准输入，一个或多个文件，或者其他命令的输出。他支持用户自定义函数和动态正则表达式等先进功能，是Linux/unix一个强大的文...
- Linux编程Shell之入门——Shell数组拼接与合并
-
在Shell中，可以使用不同的方式实现数组拼接和合并。数组拼接指将两个数组中的元素合并成一个数组，而数组合并指将两个数组逐个组合成一个新数组。以下是关于Shell数组拼接和合并的详细介绍：数...
- shell中如何逆序打印数组的内容，或者反转一个数组?
-
章节索引图首先请注意，有序的概念仅适用于索引数组，而不适用于关联数组。如果没有稀疏数组，答案会更简单，但是Bash的数组可以是稀疏的（非连续索引）。因此，我们需要引入一个额外的步骤。...
- 如何学好大数据开发?---shell基本语法
-
昨天我们初步了解到了shell的一些基本知识，比如shell的分类，常用的shell类型。今天就带来大数据开发之shell基本语法，掌握好基础才是最重要的，那接下来就开始学习shell的基本语法。一、...
- Linux编程Shell之入门——Shell关联数组
-
关联数组是Shell中一种特殊的数组类型，它使用字符串作为下标。在关联数组中，每个元素都被标识为一个唯一的字符串键值，也称为关联数组的索引。在Shell中，可以使用declare或typeset命令...
- 从编译器视角看数组和指针
-
虽然有单独的文章描述数组和指针，但二者的关系实在值得再写一篇文章。...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)