领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

前端如何让网页变灰 前端如何让网页变灰色显示

nixiaole 2024-12-26 15:50:39 知识剖析 11 ℃

应用场景

全部网页变成灰色(黑白色)，那么今天就说说，通过几行简单的代码，来实现这个功能。

万法一：

第一种:修改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，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。

Tags：

猜你喜欢

最近发表
标签列表