一行CSS实现网站页面变为黑白色

最新推荐文章于 2023-02-20 14:36:56 发布
最新推荐文章于 2023-02-20 14:36:56 发布
阅读量467 收藏 2
点赞数
分类专栏： 前端开发 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42691298/article/details/128137779
版权

以前我们要对图片进行取色，模糊等处理必须使用Photoshop等工具，而css3滤镜的出现使我们在网站中轻松实现这些效果变为可能。本次网站页面变为黑白色就是使用css3滤镜filter的grayscale属性实现的

具体代码如下：

body{
  filter: grayscale(1);
}

基本语法：filter:grayscale(val)   作用是将图像转换为灰度图像

val ：值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0，同时也可以取0-1之间小数；

效果展示：

 

una_mattina7
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
网站变黑白色CSS一行代码实现
12-01
以下为全站CSS代码. 复制代码代码如下: html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装.建议全国站长动起来.为在地震中遇难的同胞哀悼. 如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head> 之间插入: 复制代码代码如下: <style> html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} <
CSS 颜色黑白
(ง •_•)ง
01-08 367
.demo { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
用CSS将整个网站变成黑白色调的方法
11-30 798
用CSS将整个网站变成黑白色调的方法
CSS背景黑白色
TianQiWanLaiQiu的博客
12-27 269
filter （适配多种浏览器） filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
通过css实现页面黑白效果
一只想躺平却不敢躺平的小菜鸟
11-30 1609
通过css或js实现页面黑白效果
css滤镜实现页面灰色黑白色效果代码
10-30
为方便站点哀悼，特提供素装代码，以表哀悼。以下为全站CSS代码。
css实现行间距效果
10-30
CSS 实现行间距效果 ...CSS 中的行间距可以通过 `line-height` 属性或 `font` 属性来实现，合适的行间距可以提高阅读体验和网页设计的美观性。本文详细介绍了行间距的概念、实现方法和应用场景，希望对读者有所帮助。
使用html+css实现一个简单的网页页面.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
css 修改为黑白色 修改颜色为黑白 (100% 灰度)
qq_41287158的博客
11-08 796
效果如图所示，代码放下面了。在需要致黑白的盒子上加上该css即可： .grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImag
一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性
first_shun的博客
05-31 3402
2020年是不平凡的一年，在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们，有时候我们需要让网站的页面变成黑白色彩的，只需要一个css属性filter属性即可： filter 属性定义了元素的可视效果，主要使用在img上或者页面切换显示的效果，如黑白色彩等： CSS 语法 filter可以设置的属性值如下： none ：不设置 blur(npx):为元素设置模糊度(相当于给元素打个马赛克) ，设置的数值越高越模糊； brightness(%)：相当于给元素设置黑暗度，值可以是百分比也
网站变黑CSS代码
zhangkala的专栏
03-29 800
<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
黑白背景CSS设置
Mole‘Home的博客
04-04 447
黑白色CSS代码 html{ -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 332
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让图片设置成黑白色
新生代农民工
12-13 1420
.gray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
全局样式实现 页面 黑白色调——filter的使用——css基础
yehaocheng520的博客
12-12 655
全局样式实现 页面 黑白色调——filter的使用——css基础
CSS3 设置网页黑白
司马懿的西山居
04-04 1536
今天是清明节，整个CSDN都换上来黑白的装束。 对于一些需要悼念的日子，一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。还有其他特殊原因（比如汶川大地震）对部分事件表示哀悼，所以需要把整个网站设置为灰色或者黑白方格。 在黑白的网页...
黑白效果 Filter CSS
weixin_44368997的博客
11-13 219
html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; -webkit.
通过css3的filter属性实现网页变黑白效果
weixin_53731501的博客
02-20 176
通过css3的filter属性实现网页变黑白效果
css 实现文字换行 后，下一行文字溢出变成省略号
05-26
你可以使用 CSS 中的 `text-overflow` 属性来实现文字溢出变成省略号的效果。同时，为了让文本在换行时不超出容器的边界，你可以使用 `word-wrap` 或 `word-break` 属性。 以下是一个示例代码： ```css .text { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值