如何用代码实现网页变黑白色调。使用css实现网页黑白色调的功能。

1.打开网页的控制台

2.找到`body`标签，然后在控制台添加以下代码

代码如下：

body{-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;
}

3.`filter`属性的介绍——基础积累

 filter可以设置的属性值有：- none:默认值、没有效果- blur(px):为元素设置模糊度，设置的值越高越模糊（不接受百分比值）- brightness(%):设置亮暗度，0%图案全黑、100%图像无变化、>100%图像更亮- contrast(%):设置元素的灰白度，0%元素全灰、100%元素无变化、>100%元素更白-drop-shadow(h-shadow v-shadow blur spread color):设置阴影效果,类似box-shadow-grayscale(%):将元素转换为灰白度图像。取值范围（0%-100%或0-1）-hue-rotate(deg)：-invert(%)：反转输入图像-opacity(%):转化元素的透明度，相当于opacity属性-saturate(%):转换元素饱和度-sepia(%):将图片转化为深褐色-url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

完成！！！

全局样式实现页面黑白色调——filter的使用——css基础相关推荐

css样式实现页面黑白滤镜
可以通过css样式将页面变成黑白色 element.style {filter: grayscale(1); }
Vue使用全局样式，页面没有发生变化：逗号是中文的，引起错误，样式不变化也没有报错就是不起作用
因为html后面的逗号是中文符号的,不是英文符号的 /*全局样式表*/ html,body,#app {height: 100%;margin: 0;padding: 0; }
filter 灰度处理：公祭日，一行代码让页面变成黑白色调
文章目录前言一.实现原理剖析二.对需要修改的 CSS 定位三.具体代码实现及灰度区分总结前言公祭日其世界意义在于,促使人类历史记忆长久保持唤醒状态,而避免出现哪怕是片刻的忘却与麻木,共同 ...
微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
1. WXML 模板语法 1.1 数据绑定 (1) 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 (2)在 data 中定义页面的数据在页面对应的 .js 文件中, ...
网站黑白色调之filter属性
2020.4.4清明节全国哀悼,各大网站变成黑白色调,第一次访问CSDN时,看到头像竟然也变黑白色,当时以为是网站经过某种算法实现这种效果.当时感觉有点复杂,所以选择性跳过了这个问题哈哈. 但是下午江 ...
NG-ZORRO + Angular11增加自定义全局样式，不影响其他页面全局样式，仅作用于当前页面
实现只需要两步 ts import { ViewEncapsulation } from '@angular/core';// 关键代码 @Component({selector: 'app-test ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
antd select 下拉菜单的 style 属性_如何优雅地彻底解决 antd 全局样式问题
背景由于某些原因,我们团队负责在 GitLab 上做二次开发,简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件,组件库选择了 antd,尴尬的是引入之后发现,GitLa ...
uniapp 全局样式
前言在App.vue中,可以一些定义全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中. 举例 <style>@font-face {font-fa ...

全局样式实现页面黑白色调——filter的使用——css基础

1.打开网页的控制台

2.找到`body`标签，然后在控制台添加以下代码

3.`filter`属性的介绍——基础积累

全局样式实现页面黑白色调——filter的使用——css基础相关推荐

最新文章

热门文章

全局样式实现 页面 黑白色调——filter的使用——css基础

1.打开网页的控制台

2.找到body标签，然后在控制台添加以下代码

3.filter属性的介绍——基础积累

全局样式实现 页面 黑白色调——filter的使用——css基础相关推荐

最新文章

热门文章

全局样式实现页面黑白色调——filter的使用——css基础

2.找到`body`标签，然后在控制台添加以下代码

3.`filter`属性的介绍——基础积累

全局样式实现页面黑白色调——filter的使用——css基础相关推荐