用CSS将整个网站变成黑白色调的方法

最新推荐文章于 2022-12-01 22:24:39 发布
最新推荐文章于 2022-12-01 22:24:39 发布
阅读量822 收藏
点赞数
分类专栏： CSS笔记 文章标签： CSS filter grayscale 浏览器兼容 网页样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai7425/article/details/128121595
版权 
body { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

    html { 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
		filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; 
    }

hai7425
关注
专栏目录
如何用CSS将网页图片或整个页面弄成黑白
晓强的技术博客
05-09 8193
场景需求 因为某些原因，需要将图片弄成黑白，甚至想把真个网页都弄成黑白，而不需要太多的代码，应该怎么弄？ 利用CSS的 filter: grayscale(1) 使用 filter 属性对元素应用滤镜效果的方法，匹配 SVG 中可用的滤镜。 滤镜功能包括模糊blur、亮度brightness、对比度contrast、阴影drop-shadow、灰度grayscale、色调旋转hue-rotate、反转invert、不透明度opacity、棕褐色sepia和饱和度saturate。 例如，对图片进行灰度化处理
修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理
11-21
今天上午有网友提到希望将网站整体的色调换成灰色、黑色色调，这个记得在以前纪念一些日子的时候会有用到，以前软件开发网网站中也有使用的。记得那时候直接是修改CSS就可以实现，既然有用户需要，这里抽点时间再...
全国哀悼日网站页面变成灰色的filter方法
10-30
今天访问好多网站包括百度，启点等网站都变成了黑白色界面，体现大家对于四川地震的深切哀悼，但有好的站长不一定知道是什么方法，还以为是大量改版，对于任何人都不是很轻松的事，特将本站的解决方法告诉大家。
一行CSS实现网站页面变为黑白色
不想学习的打工人的博客
12-01 480
以前我们要对图片进行取色，模糊等处理必须使用Photoshop等工具，而css3滤镜的出现使我们在网站中轻松实现这些效果变为可能。本次网站页面变为黑白色就是使用css3滤镜filter的grayscale属性实现的
网站 黑白 原理
码上行动
08-16 4822
为方便站点哀悼，特提供素装代码，以表哀悼。以下为全站CSS代码。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。 如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入： <style> html{filte
网站变黑CSS代码
zhangkala的专栏
03-29 808
<br /><style> <br />html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} <br /></style><br />或者<br /><style> <br />html{filter:gray;} <br /></style> <br /> <br />FLASH无法黑白怎么办?<br />可以在FLASH代码的<object …>和</object>之间插入：  <br /><param value
网站变为黑白
刘晓春
06-29 2255
项目接近尾声了，前几天在测试的时候发现，在某个win7电脑的IE上，网站竟然变成了黑白的。我的电脑是win8的系统，用IE测，更改各种文档模式均正常，令人费解。     找不到原因，更改浏览器的各种设置，均没有效果。     上网搜资料的时候发现，很多网站为了纪念大地震或者其他日子的时候会故意把网站网站变成黑白的。没有平白无故变成的黑白的。     此时应该想到，看看怎么设置黑白，看看我的是
网站页面黑白色效果实现技巧
阿嚏乱码的地方
12-14 8706
晚上下班回到家中，惯例打开B站，B站首页变成了黑白色主题。 B站首页是如何做到的黑白主题？ 如果首页html换成黑白风格的，这个好实现。可是每个视频封面图都重新做一张黑白的版本，每个视频都是up主自己的投稿视频啊，怎么保证封面图都能黑白色呢？后期靠人工换的话，那代价也大了，而且也很傻。 那么能不能靠技术手段解决呢？ 让我们打开开发者工具看看页面具体的样式。 突然我发现在html...
如何把我们的网站变成黑白色或是灰色
01-20
此代码会将整个网页转换为黑白灰阶效果。如果你是初学者，可以将此代码添加到你的CSS文件中，确保与其它代码之间有换行分隔。 2. 在`<head>`标签内加入内联CSS： 如果你不想修改CSS文件，也可以直接在HTML的`...
网站整体变成黑白色的方法
03-14
总之，通过CSS滤镜，我们可以轻松地将网站整体转换为黑白色调，以传达特定的情感和氛围。然而，考虑到不同浏览器的兼容性和性能影响，开发者应当谨慎选择合适的方法，并考虑在纪念活动结束后恢复原来的色彩设计。
如何使网站变成黑白？
weixin_44710964的博客
04-04 1068
今天4月4日，全国哀悼日 在此对抗击新冠肺炎疫情斗争牺牲烈士和逝世的同胞表示深切哀悼 同时我们也不能忘记学习 今天很多网站诸如CSDN、淘宝等都变成了黑白色调，这个是如何实现的呢？ 如果是图片和背景颜色一个个手动换是非常麻烦的，这个时候我们就需要用到CSS3的滤镜属性： html { filter: grayscale(100%); } 通过对根结点html设置黑白滤镜，这样网站就可以全部换为...
网站调整为黑白的方法
最新发布
wangmj518的专栏
12-01 374
当举行哀悼活动时，有时会要求将网站调整为黑白色，确保展现效果肃穆凝重通过以下方法可快速将网站调整为黑白首先，先下载grayscale.js文件，需要使用这个插件实现效果链接: https://pan.baidu.com/s/1KWbWDWHclvjPcZfMIJljxA 提取码: uw9e修改首页在html文件中加入以下代码（自行更换grayscale.js的路径）important;}
沉痛哀悼，网页变黑白代码！
火星人的充电房
04-21 2205
根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。 我站博客与很多网站都将整站换成素装。并建议中国所有站点更换为素装。 国务院决定5月19日至21日为全国哀悼日 .为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站
一段可以让整个网站变黑白代码
三月的风沙
08-16 853
在你网站的CSS文件力加入此代码即可自动把网站一切颜色变成单色，哀悼日过后删除代码即可还原彩色 代码:html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} 使用方法：这段代码可以变网页
网站黑白色调之filter属性
FBm的博客
04-04 511
2020.4.4清明节全国哀悼，各大网站变成黑白色调，第一次访问CSDN时，看到头像竟然也变黑白色，当时以为是网站经过某种算法实现这种效果。当时感觉有点复杂，所以选择性跳过了这个问题哈哈。 但是下午江哥（成都oppo前端大佬~~），突然提出一个问题，你们知道网站怎么实现黑白色吗？ 然后分享了现实原理，竟然一行代码。。。 // 在html或body元素设置css属性 filter: graysc...
网站变成黑白色的几种方法
qq_53280805的博客
11-30 655
网站变成黑白色
把网站服务器调黑白,网站快速变黑白灰色的4种方法
热门推荐
weixin_39887926的博客
08-05 1万+
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色)，以表示我们对逝者的悼念。那么天下数据小编就说说，通过几行简单的代码，来实现这个功能。第一种：修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰CSS代码html {filter: progid:DXImageT...
一行 CSS 代码实现整个网站网页变黑白灰的效果
piaoyecanfeng的博客
11-30 593
一行代码实现网页黑白灰的效果
整个网站变黑色（给html设置样式）
weixin_34194359的博客
01-18 1777
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);} 转载于:https://www.cnblogs.com/dengxiaoqing/p/5138691.html
CSS垂直居中：五种实用方法解析
"这篇文章主要介绍了CSS垂直居中的五种实现方法，包括其优缺点和适用场景，帮助开发者更好地理解和选择适合的垂直居中方案。" CSS垂直居中是网页布局中常见的需求，以下是对五种方法的详细说明： 1. **表格模拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hai7425

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值