利用css让整个网站变黑白色 ，图片也是黑白色

已于 2024-05-10 20:23:46 修改
阅读量201 收藏
点赞数 1
分类专栏： css 文章标签： css3 前端 css
于 2022-12-02 16:09:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35761056/article/details/128149735
版权

       今天接到一个需求，老板要求小程序首页变成黑白色。

       之前也没做过这样的内容，第一感觉就是图片要重新设计黑白色，布局颜色都要修改。但看到好多网站瞬间变黑白色，感觉一定有更好的解决方法。后面才找到filter属性解决了。

       CSS的 filter: grayscale(100%);  属性即可实现灰度效果  ，元素设置 filter: grayscale(100%)  属性整个元素里的内容全部显示黑白颜色，包含图片内容。

修改前：

修改后：

qq_35761056
关注
专栏目录
如何用CSS将网页图片或整个页面弄成黑白
晓强的技术博客
05-09 8193
场景需求 因为某些原因，需要将图片弄成黑白，甚至想把真个网页都弄成黑白，而不需要太多的代码，应该怎么弄？ 利用CSS的 filter: grayscale(1) 使用 filter 属性对元素应用滤镜效果的方法，匹配 SVG 中可用的滤镜。 滤镜功能包括模糊blur、亮度brightness、对比度contrast、阴影drop-shadow、灰度grayscale、色调旋转hue-rotate、反转invert、不透明度opacity、棕褐色sepia和饱和度saturate。 例如，对图片进行灰度化处理
网站变黑白色CSS一行代码实现
09-27
5．12地震给四川人民带来了巨大灾难，5月19日到5月21日为全国哀悼日，有很多网站界面今天都变成了黑...对于普通的站长来说，对于灾难并不能多做些什么，但可以做到将自己的网站也变成黑白色，从而缅怀那些地震逝者。
把网站变成黑白色
神zhi殇的博客
04-10 2074
简单几句CSS代码，就可以把网站变成黑白色： html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 使用的是CSS滤镜，将网页中的色彩部分过滤掉。 ...
CSS3滤镜属性filter让网页变黑白
最新发布
weixin_41728056的博客
07-23 22
很多特殊的时候，我们向英雄们致敬，在互联网上最常见的方式就是整个网页变黑白，今天逛某博客收集一段代码，用于网页整体变黑白，用css3滤镜属性filter让网页马上变黑白，一行代码就搞定。在你的css里加上以下代码即可，网页马上变黑白：登录后复制 html{ filter:progid:DXImageTrans...
CSS实现将图片变黑白
qq_31666019的博客
11-20 541
css把图片变成黑白色
通过css让图片设置成黑白色
新生代农民工
12-13 1467
.gray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
css样式实现页面变为黑白
qq_44875813的博客
12-13 346
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,#grayscale); -webkit-filter: grayscale(1);
通过css实现页面黑白效果
一只想躺平却不敢躺平的小菜鸟
11-30 1656
通过css或js实现页面黑白效果
css滤镜实现页面灰色黑白色效果代码
10-30
在网页设计中，有时候为了表达某种特殊的氛围或者纪念意义，如哀悼活动，我们需要将整个网站的色彩转换为黑白色或灰色调。CSS滤镜功能在此时就显得非常实用，它允许我们轻松地调整元素的视觉效果。本篇文章将详细...
清爽黑白色搭配网站模板是一款简洁白色风格样式的CSS网页模板下载。.zip
02-22
【清爽黑白色搭配网站模板】是一款专为网页设计爱好者和开发者打造的CSS网页模板，以其独特的黑白配色方案，展现出一种简洁、优雅的视觉效果。该模板基于HTML和CSS技术，适用于创建各种类型的网站，包括个人博客、...
清爽黑白色搭配网站模板是一款简洁白色风格样式的CSS网页模板下载 .rar
02-21
【清爽黑白色搭配网站模板】是一款专为网页设计爱好者和开发者打造的CSS网页模板，以其独特的黑白色调和简洁的设计风格赢得了广泛的认可。这款模板强调的是极简主义，旨在为用户提供清晰、舒适的浏览体验，同时简化...
网站变黑白JS
04-26
网站变黑白JS,遇到大难，虽把网页变黑白色，此JS可实现。
css如何将彩色图片变为黑白图片
一个九零后程序猿开发日志
12-01 362
css如何将彩色图片变为黑白图片
使用css将彩色图片转换为黑白图片
m0_64864889的博客
05-17 1409
如何使用 CSS 的这个功能实现调整色调、模糊、亮度、对比度和一些其他的效果。
使用CSS将图片转换成黑白(灰色、置灰)
泥猴桃的博客
08-21 1053
可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。图片效果如下代码如下，兼容IE浏览器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
css 网页色调变为黑白
qq_45634989的博客
07-11 343
在html的css中加入。
纯CSS将图片转换成黑白
草巾冒小子的博客
08-11 1548
纯css设置img图片的灰色程度 CSS代码如下： .partners-list li a i { -webkit-filter: grayscale(100%) brightness(1) contrast(.5); -moz-filter: grayscale(100%) brightness(1) contrast(.5); -ms-filter: grays...
网站网页快速变黑白方法
hongweigg的专栏
06-11 8594
网页变黑白常用于表达悼念、怀念故去的著名人物、重大灾难事件等。通过分析，百度百科人物网页变黑白是这么做的：webkit-filter: grayscale(1);其中grayscale（）的取值为0%-100%，也可以用0-1取代，0%代表彩色图像，100%代表完全的灰度。 css filter的浏览器兼容：Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+, Blackberry 10+均支持了-webkit-filter的方式，IE
如何使网站变成黑白？
weixin_44710964的博客
04-04 1068
今天4月4日，全国哀悼日 在此对抗击新冠肺炎疫情斗争牺牲烈士和逝世的同胞表示深切哀悼 同时我们也不能忘记学习 今天很多网站诸如CSDN、淘宝等都变成了黑白色调，这个是如何实现的呢？ 如果是图片和背景颜色一个个手动换是非常麻烦的，这个时候我们就需要用到CSS3的滤镜属性： html { filter: grayscale(100%); } 通过对根结点html设置黑白滤镜，这样网站就可以全部换为...
css边框颜色渐变从上到下由黑色变白色渐变
05-18
你可以使用 CSS 的 `linear-gradient` 函数来实现这个效果。具体实现方法如下： ```css border: 1px solid; border-image: linear-gradient(to bottom, black, white); ``` 其中，`to bottom` 表示渐变的方向为从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值