如何让网页变灰色

最新推荐文章于 2024-09-09 23:40:06 发布

~heart将心比心

最新推荐文章于 2024-09-09 23:40:06 发布

阅读量941

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_42412061/article/details/128155164

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在一些重大节日，如何快速使网站网页变成灰色（黑白色），

在网页的<head>标签内加入以下代码：

<style type="text/css">

html {

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);}

</style>

如果想让单个网页变灰色，就写在单网页里面，如果写在继承的网页里面，是整体的变灰色

如果你不想改动CSS文件，你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

~heart将心比心

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

网站变灰代码网站变灰代码

05-04

网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码

利用CSS将网站网页变灰色代码示例

09-24

在网页设计中，有时我们可能需要将整个网站或者部分元素变为灰色，以达到特定的视觉效果，比如创建复古风格、致敬经典或者强调某些信息。在本文中，我们将深入探讨如何利用CSS来实现这一目标。首先，我们可以使用...

1 条评论您还未登录，请先登录后发表或查看评论

网站变灰代码

weixin_34279579的博客

03-24

网站首页建议改为灰色，以表达我们对遇难同胞的深切哀悼。把下面代码加到网页/模板的HTML代码的<head>和</head>之间： <style> html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} </style> 这个网站变...

简单实现网站全站变灰css代码

最新发布

CSDN专家-微编程的博客

09-09

227

有些特殊日子，不少网站也都通过代码来实现灰色哀悼效果。

图片变灰

weixin_30391339的博客

04-10

414

img{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'htt...

如何让网站变为灰色

dbjtimve93993的博客

05-21

430

　今天开始对汶川灾区默哀3天，为了表示哀悼，各大门户网站也自发的把网页改为灰色了。如腾讯网、大三亚网等。下面，提供一下技术实现办法。　　如果让整个页面都变黑白　　自己加到css样式里　　body{filter:Gray;} 　　如果光让图片变黑白　　img{filter:Gray;} 　　如果只让指定图片比如logo灰色　　现在css里建个...

网站变灰色的方法

ALL TECHNOLOGIES ARE CLOUDS

11-14

202

如果你的网站是静态页面，能够支持CSS，那就方便很多了。只要是符合W3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分给滤掉了。　　CSS滤镜过滤色彩代码：　　html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 　　加上代码之后，再次刷新...

css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

01-21

复制代码代码如下: ... -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; }

让网页图片变灰色将彩色图像变成灰度的三种方法

01-19

我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把...以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。添加如下CSS样式可以将图像变成灰色复制代码

如何实现页面变成灰色

yirexiao的专栏

04-05

541

如何实现页面变成灰色 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Micro...

如何让网站变灰

weixin_30781433的博客

02-04

169

如何让网站变灰今天给大家分享一个web前端的小技巧哦，就是如何在公共哀悼纪念日，让网站变为黑白颜色。其实很多方法有css实现，和js实现的。网上都有的，js有js的特点，css有css优点，当然缺点也是存在。 1.超兼容IE，火狐firefox，谷歌的css滤镜 1 2 3 4 5 6 7 8 9 html { ...

如何把我们的网站变成黑白色或是灰色

01-20

第一种：修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰.(如果是小白站长们，可以把这段代码和到百度统计放在一起，放之前一定要记得换行隔开） CSS代码 html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 第二种：在网页的标签内加入以下代码如果你不想改动CSS文件，你可以通过在网页头部中的标签内部加入内联CSS代码的形式实现网站网页变灰。放到标签与底部即可。代

jquery网页变灰

05-29

jquery 让网页变灰、内含实例和源码

网页变灰色

征途人生&梦

05-28

786

body{ -webkit-filter: grayscale(1);/* Webkit */ filter: grayscale(1);/* W3C */ } .gray{ -webkit-filter: grayscale(1);/* Webkit */ filter: grayscale(1);/* W3C */ }

如何将网站实现变灰的效果？

Edison_lyh_的博客

12-04

402

想必各位小伙伴都感受到了，很多网站、APP 在昨天都变灰了，变灰的原因是为了纪念一位伟人。先来感受一下变灰后的效果。这是掘金的这是 B站的这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能。方案 2，用魔法！不好意思，还真被你猜中了！在网页端按下 F12，打开开发者模式，用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码。我把它复制过来大家看一下。

怎样将网站变灰

处事如水

05-21

115

为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院决定，2008 年 5 月 19 日至 21 日为全国哀悼日。在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5 月 19 日 14 时 28 分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。很多网站都变成黑色了,像QQ 163等大型门户站也变了,他有的有css 皮肤...

网站都变成灰色了，它是怎么实现的？

热门推荐

沉默王二

12-02

8万+

可以看到，目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。在网页端按下 F12，打开开发者模式，用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码。大致的意思就是，grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个百分比，结果返回一个 filter 函数。

网站如何快速变成灰色？，几行代码就搞定了！

weixin_42415158的博客

12-03

5757

网站如何快速变成灰色？，几行代码就搞定了！

如何让网站快速变灰

yihanzhi的博客

09-03

344

利用css滤镜，可使网站快速变灰，实现代码如下： html { 　　filter: grayscale(100%); 　　-webkit-filter: grayscale(100%); 　　-moz-filter: grayscale(100%); 　　-ms-filter: grayscale(100%); 　　-o-filter: grayscale(100%); 　　filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.

网页变灰色代码兼容ie

11-03

要实现让网页变灰色的效果，并且兼容IE浏览器，可以使用以下代码： ```html <!DOCTYPE html> <html> <head> <style> /*创建一个覆盖整个网页的半透明灰色层*/ .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; filter:alpha(opacity=50); /* 兼容IE的透明度设置 */ z-index: 999; /* 设置层级，使其位于其他元素之上 */ } </style> </head> <body> <h1>网页变灰色的效果</h1> <div class="overlay"></div> <p>这是一个示例网页。</p> </body> </html> ``` 以上代码中，通过为网页添加一个覆盖整个网页的半透明灰色层的`div`元素，来实现网页变灰色的效果。`overlay`类设置了`position: fixed;`来固定层的位置，`top: 0; left: 0; right: 0; bottom: 0;`使其占据整个页面，`background-color: #000;`设置为黑色，`opacity: 0.5;`设置透明度为0.5，`filter:alpha(opacity=50);`则是兼容IE浏览器的透明度设置。最后，`z-index: 999;`设置了层级，让其位于其他元素之上。